Webサイトのデザインを作り直すにあたって調べたこと・やったこと　Part.2　～トップページの作成～

2021.10.21
ノウハウハウツー実践

前回に続き「Webサイトのデザインを作り直すにあたって調べたこと・やったこと　Part.2」として

トップページの作成に進んでいきたいと思います。

前回の記事はこちらなので、まだの方は是非チェックしてみてください！

Webサイトのデザインを作り直すにあたって調べたこと・やったこと　Part.1　～色セット作成・ロゴデザイン～

1. トップページの作成
2. 最後に

トップページの作成

トップページのデザイン

まず最初にやるべきことは、デザインすることです。

「デザイン」と言っても、色や形、配置などの見た目のことだけでなく、訪れた方へ、

「どんな情報を」「どのように伝えるか？」

ということもとても重要になります。

トップページ完成までは、大まかに以下のような流れで進めました。

ページ全体の流れを文字で書き出す
書き出した内容を項目分けし必要な要素を書き出す
文字のみのラフのデザインを作る
ラフデザインに実際に作成した画像などを当てて本デザインを作成
本デザインデータを元に実際にコーディングする

それでは順を追って説明していきたいと思います。

参考にしたサイトはこちら

webdesignclip

最新のデザインに優れたサイトをブロック状に紹介したサイトで、サムネイルで表示されているので、お好みのデザインを探すのにはとても探しやすいかと思います。

81-web.com

こちらも同様に、デザインのサムネイルがブロックで表示されているので、お好みのデザインは探しやすいかと思います。

1.ページ全体の流れを文字で書き出す

まずはどういった流れで、来た人へどんな情報を見せたいのか？を大まかに文字で書き出します。

全体のコンセプトや、ペルソナ・ターゲット、このサイトで解決すること、などの戦略的な内容を書き加えても良いかもしれません。

今回はこのようにしてみました。

①トップでサービス全体のコンセプトと目的を、画像と少々の文字を用いて表現する。
　ここで早くも利用するボタンを登場させ、リピーターへ向けユーザビリティのアップ！
②悩み・問題の投げかけ
　こんなことってありますよね？「意見を出した人によってとらえ方が変わる」「SNS企画を成功させたい」「ブレスト会議などで意見が出せずに終わってしまった」
③Collectに全てお任せ！的な
④このサービスで出来ること・解決できることを簡潔に述べる。
　1.匿名での応募と選考　2.応募方法が簡単　3.リモートワークにも最適！
⑤簡単な使い方を説明
　ステップを3～4つで簡潔に分かりやすく、図を用いて説明する。
⑥いざ、使ってみよう！

ざっとこんな感じで、割とシンプルな内容で纏めるようにしてみました。

もう少し細かく、いろいろな要素を書き込んでいくと、もっといいサイトになるかと思いますが、今回はコンセプトにも「分かりやすくシンプルに」というものを持っているので、なるべく少なくなるよう心掛けて作成しました。

2.書き出した内容を項目分けし必要な要素を書き出す

次に、１．で書き出した流れを元に、更に簡潔にグループに分けて纏め、それぞれ必要な要素を書き出していきます。

ここはもう、最終的なサイトの作りを意識して書き出していくと、その後の作業が楽になると思います。

今回は以下のようにまとめてみました。

１．【導入部分】
　キャッチコピー・アイコン・概要・開始するボタン
２．【一度はあるこんなこと】
　「出した人によって意見の捉え方が変わる（忖度）」
　「アンケートやプレゼント企画を成功させたい！」
　「オンラインで時間をかけてアイデアを出したい」
３．【できること】
　「匿名選考」「簡単応募」「オンライン化」
４．【いますぐはじめよう】
　4ステップで説明。
６．【特徴】
　完全無料・登録不要・制限なし
７．【さっそく使ってみる】

以上となりました。今回は、実際に見出しとして使用する文字を考えて、グループ名としました。なので、見出しはそのままサイトにも反映されています。

本来は、後で読み返したときに、今回考えたものがよみがえってくるように、詳細に書くのが良いかと思います。画像にしても”どんな画像なのか？”ということをメモし、文字でもイメージが伝わるようにします。

ブロックなどで分けたい場合や、表にしたい場合も、それに沿った書き方にすると、これも後で見返したときに分かりやすくなります。