templaというWebサービスのデザインをしました

会社のエンジニアに頼まれて、templaというWebサービスのデザインをしました。せっかくなので、その時のデザイン工程を振り返ってまとめてみました。

目次

  1. ゴールの設定
  2. 参考探し
  3. 要素の整理
  4. 手書きでレイアウト
  5. 色とフォントの選定
  6. デザイン着手
  7. デザイン詰め

1.ゴールの設定

  • top
  • dev

今回デザインするtemplaは、画像付きツイートのサーバサイド処理を代行するBaaSだそうです。

トップページとログイン後のトップページ、あとはマニュアルページの3ページの小規模なサイトです。(上の画像はトップとログイン後トップ)

サイトを見たり説明を聞いたりして、以下のゴールを設定しました。

  • サイトの内容が専門的でわかりにくいので、「何のサイトか」「何が出来るのか」をしっかり伝えよう
  • このBaaSが必要な人たちが「簡単にできそう」と思って気軽に登録してもらえるようにしよう

2.参考探し

デザインをするときは、必ず参考をさがすことから始めます。

今回はBaaSのサイトをいくつか見て回ったのと、Stacheに貯めておいたサイト(主に「service」タグをつけておいたサイト)をざっと眺めて、以下の2つを参考としました。

milkcocoa

スクリーンショット 2016-03-06 19.04.51

国内BaaSの有名ドコロだそうで、BaaSの内容を説明しているページ構成を参考にしようと思いました。

pixel union

スクリーンショット 2016-03-06 16.37.55

WordPressやTumblrなど様々なサービスのデザインテーマを販売しているサイトのようです。

「クール」だとか「スタイリッシュ」だとかは敷居を高くしてしまうと思ったので、こんな感じにかわいい色合いにしようと思いました。

変にカッコつけたりせずに、親しみやすい・敷居の低そうな感じになると良いかなと。

(あとは、ファーストビューにMacがあるのも、画像付きツイートを見せられたりして良いかな、なんてこともぼんやり考えていました。)

3.要素の整理

なんとなくのイメージができたら、サイトの構成要素を整理します。

僕の場合は、まず箇条書きでコンテンツをリストアップして、競合サイトを見ながら過不足がないか確認します。

コンテンツのリストアップは、例えばこんな感じ。

  • ヘッダー(ロゴ、ナビ)
  • 一言サイト説明&図解(横ぶち抜きヘッダーイメージ)
  • サイト説明詳細
  • 使い方フロー
  • プラン(templaは今のところ無料のみ)
  • 使用例
  • フッター(コピーライト)

4.手書きでレイアウト

載せるものが決まったので、今度は手書きでラフをいくつか書いてみます。

余りにも雑だったので画像アップはやめたのですが、それくらい適当な感じでコンテンツを配置していってサイトの全体像を掴みます。

この作業をPhotoshop上でやってしまうと、全体と細部を同時に考えることになり、考えないといけないことが多すぎて迷走してしまいがちです。

5.色とフォントの選定

今回はかわいい感じの色合いにしたかったので、Kulerで探してみました。 候補は以下の2つで、前者を選びました。

  • スクリーンショット 2016-03-06 19.17.46
  • スクリーンショット 2016-03-06 19.17.18

色の次はフォントです。今回はGoogle Fontsで探しました。

選定基準としては、きっちりしすぎてるものはダメで、可愛げ・親しみやすさのあるもの。ただし、個性がありすぎるのも信頼性を損ねるのでダメ、という感じで選びました。

5つくらいピックアップしてから、最終的にGoogle Fonts Fredoka Oneを選びました。
スクリーンショット 2016-03-06 19.21.46

上で決めた色とフォントをベースに作ってみると、こんな感じ。

templa_v1

6.デザイン着手

先ほど決めたテイストをベースに、手書きラフを見ながらPSDデータを作っていきます。
(昔はよくこのステップにいきなり着手してしまっていました)

templa_v2

7.デザイン詰め

パパっと作ってしまったので、一旦全ての要素を見直します。

例えば、「ファーストビューの画像は、画像付きツイートよりも、関係図を見せたほうがいいんじゃないか」とか、「使い方の図はこうした方がわかりやすいんじゃないだろうか」とか。

トップが固まってきたら最後に余白の調整をして、他のページも同じようなテイストで作っていきます。

TOP

templa_top_v8

ログイン後TOP

templa_loginTop_v2

これで完成です。
何かもう一工夫できると良いのですが、今回はお仕事でも無いのでこれくらいで。

ちなみにtemplaのURLはこちら

templaというWebサービスのデザインをしました」への1件のフィードバック

  1. ピンバック: デザインカンプが出来るまで - takashi178.me

コメントを残す

メールアドレスが公開されることはありません。