2020年5月10日に当サイトのサイトデザインを一新しました。
新しいサイトデザインを実現するにあたり、検討したいくつかの項目を記録としてこの記事に残します。
なぜデザインをリニューアルしたのか
モバイル（スマホ・タブレット）端末の普及が進んだ現代では、Webサイトはレスポンシブデザイン（端末に問わず全ての画面サイズに適したデザイン）が欠かせません。
私の運営しているブログのサイトへのアクセスを端末別に分類すると、モバイルが50%、デスクトップが50%と、半々の割合です（サイトのジャンルにもよりますが）。今後もモバイル端末の軽量化や高性能化が続くことが予想されます。「将来的に当サイトへのアクセスはデスクトップよりもモバイル端末の方が多くなる」という前提に焦点をあて、リニューアルすることとしました。
新しいサイトデザインのコンセプト
リニューアル以前のサイトデザインでは、レスポンシブデザインに対応していたものの、モバイル端末では操作性が悪く、使いにくいインターフェースがいくつか残っていました。この問題点を改善すると共に、
「モバイルファーストなUIデザイン」
をコンセプトとして掲げ、UIデザインを調整しました。
新しくリニューアルしたデザインの例と意図
ここからは、リニューアルしたデザインを3つほどピックアップし、そのデザインの意図をご紹介します。
1. モバイル端末でのハンバーガーナビゲーションの廃止
モバイル端末時に表示されていたハンバーガーナビゲーションを廃止しました。
スマホでWebサイトを閲覧しているときによく発見するハンバーガーナビゲーション。これは、デスクトップ端末で表示しているナビゲーションを上手く収容し、モバイル端末でもボタンをタップすることで綺麗に表示できるデザインです。
ハンバーガーナビゲーションは、タップすることでナビゲーションを表示するものです。しかし、1タップというアクションには、ユーザーの非常に大きなモチベーションを必要とします。
Amazonが1-click注文の特許を取得していたことは有名です。ECシステム開発においてカートに商品が入っているものの、精算されずに放置されてしまうこと（カゴ落ち）で収益を落としてしまうことがありました。この問題に対するAmazonのソリューション1-click注文でした。1-click注文によりAmazonがいくら収益をあげたかは定かではありませんが、1-clickで注文できるデザインにより、ユーザーの購買意欲を損なうことなく商品の精算へと導く率を上げたのです。
この前例から分かる通り、1タップ1タップはユーザーへストレスを与え、最終的にはユーザーをサイトから離脱させてしまう操作です。ハンバーガーメニューはUI上好ましくないと考え、リニューアルを機に廃止しました。
2.固定サイトナビゲーションの導入
YouTubeのモバイルネイティブアプリでもあるような固定サイトナビゲーションを導入しました。これはハンバーガーナビゲーションを廃止したことにより新たに必要になったコンポーネントでもあります。なお当サイトでは、モバイル端末（デバイスの横幅ピクセルが992px未満とする）のときのみに表示されるようにしています（ブログ記事ページを除く）。
モバイル端末では指で直接操作するため、画面下部に配置されたUIが最も操作しやすいという特徴があります。逆に画面左上にあるUIは物理的に一番操作がしにくいものになります。
サイトのナビゲーションをモバイルネイティブアプリと同じようにサイトナビゲーションを最下部に固定し、配置しました。
サイトナビゲーションにおいて、アクティブなページを色付けするなどによって、「今自分がサイトのどこにいるのか」をユーザーに伝えることができます（コンテンツが増え、ページ数が多くなるとサイトナビゲーションだけでは難しくなりますが）。
3.アサイドコンテンツの廃止と縦長レイアウト
アサイドコンテンツを含むレイアウトは、現行のサイトの中でもブログサイトでよく採用されています。私の運営しているブログでも記事のページにアサイドコンテンツが表示されます。
アサイドコンテンツは主にデスクトップ端末で、画面幅を余すことなく利用し、ユーザーにオススメ記事などを表示することで選択肢を与えるものです。
当サイトにもブログ記事を公開できる仕組みを取り入れましたが、記事ページではアサイドコンテンツを排除しています。記事のページでは文章を読むことに集中できるレイアウトにしたかったためです。
ユーザーの縦スクロールをユーザージャーニーと捉え、「1度に1情報だけ」を見せるレイアウトを目指しました。結果として、デスクトップ端末においても縦長にコンテンツが表示されるレイアウトを採用しました。
最後に
上記で紹介した以外にもいくつか変更を加えた点がありますが、この記事はここまでとします。
サイトデザインリニューアルと共にしれっとブログ記事の執筆をはじめました。当サイトのブログでは、主にサイト制作・UIデザインを行うにあたって考えた思考の軌跡を残していく予定です。
この記事の 最終更新：2020.5.10