モバイルファーストのウェブデザイン

2017.06.11

このウェブサイトを作るときに心がけたことは、スマートフォンでいかに見やすいか。操作しやすいか。試行錯誤しながら作りました。いわゆるモバイルファーストと呼ばれている考え方だと思います。このウェブサイトを作ったときの工夫と考えをご紹介します。

1. メニュー

スマートフォンだとメニューは通常ハンバーガーメニューが多いですが、このサイトでは、下に固定してみました。まず、見えていた方が分かりやすくワンアクションで操作できます。そして上に固定すると、タップした指が邪魔でその瞬間画面が見えません。そう考えた結果この形になりました。

2. 横スクロール

PCサイトで横並びのコンテンツは通常スマートフォンだと、縦並びにすることが多いかと思います。縦に並べるとページが縦に長くなってしまうこと考えて、このサイトでは横スクロールにしてみました。横のコンテンツを半分ほど見せることで、横スクロールすれば見れることが判断できます。

3. 1ページにまとめる

このサイトでは、ブログ以外のコンテンツをトップページに詰め込んでいます。ページを分けるよりもスクロールして見た方が見やすいかと思ったことと、トップページでサイトのコンテンツをすべて見てもらうためです。まず制作事例を見てもらい、次にどんな人でどんなことができるか見てもらい、結果的にお問い合わせしてもらいたい流れになっています。

このように考えながらこのサイトを作成しました。何が正解かは分かりませんが、自分が考えて見やすく操作しやすいデザインにしてみました。スマートフォンアプリ寄りなデザインに行き着いた気がします。
ウェブサイトの制作は、見る人使う人がどう感じてどう操作するか仮説を立てて、日々感じていることからデザインを導きだして形にしています。