あなたは、Webサイトを作る時にどのようなデザインを心がけていますか？
このページを見ているということは、あなたはきっとデザインする上で大切なことを考える思考をお持ちの方だとお見受けします。
というわけで、今回の記事では【2020年】今の時代に合ったWebサイトのデザインを一緒に考えていきたいと思います！
大前提のUI/UXという考え方
Webサイトのデザインを考える上でどうしても外せないのがこの言葉…『UI/UX』です。
すでにご存知かもしれませんが一応おさらいしておきましょう。
UI（ユーザーインターフェイス）
まずはUIですが、ユーザーインターフェイスの略です。
「Interface：インターフェイス」という単語は直訳すると「境界面、接点」の意味になりますが、WebサイトにおけるUIは、スマホやパソコンで閲覧している人が画面上で見える全ての情報がUIに当たります。
例えば、サイトの色合い、メニューの配置、ボタンのデザイン、フォントの指定、など等…目に見えるWebサイトのデザイン全てです。
UX（ユーザーエクスペリエンス）
次にUXですが、ユーザーエクスペリエンスの略です。
「Experience：エクスペリエンス」という単語は直訳すると「体験、経験」といった意味ですが、Webサイトでいうとそのサイトのデザインによって得られる「見た目の美しさ」「見やすさ」「操作性の良さ」「読み込みの速度」などがUXに当たります。
…と、かなり割愛してUI/UXについて説明しましたが、これを意識してデザインすることが大前提であると考えてください。
モバイル(スマホ)が全てと考えるべし
Googleも強く推奨しているのが「モバイルユーザビリティ」です。
モバイルが今ほど普及していなかった頃は「インターネットはパソコンでするものだ！モバイルなんて二の次！」ってGoogleさんも言ってたんですけどね…。これほどまでモバイルが普及してそうも言ってられなくなったようです。
ぼくもGoogleアナリティクスで色々なジャンルのWebサイトを解析しますが、端末比率を見るとモバイルが圧倒的シェアになっていることが明らかです。以下の画像はぼくが運営してる「健康系」の記事を公開しているブログの解析データですが…
- モバイル：73.36％
- パソコン：22.09％
- タブレット：4.55％
…という結果に。
もはや「インターネットはモバイル（スマホ）で見るもの」というのが今の時代の主流なのです。
ですから、Webサイトをデザインする際はモバイルが優先！パソコンで見ても美しくデザインされているのが理想的ですが、モバイルでいかに見やすく構成されているかが重要と言えます。
世代間のギャップに気を付けて！
あなたの年齢はおいくつでしょうか？
10代、または20代前半の方には、ひょっとすると分からない【記号】があるかもしれません。
例えば以下のような記号はどうでしょう？
30代くらいの人なら分かると思いますが、これは【電話のマーク】です。元をたどれば自宅回線の黒電話でしょう。
しかし10代～20代の世代ではこれが何の記号なのか理解できない人も少なくないそうです。これはもう死語ならぬ死記号とも言えるかもしれません。
そんなわけで、このマークを電話のボタンとして設置しているサイトが未だに多く見受けられますが、若い世代がターゲットのサイトであれば使うのを避けたほうが良いでしょう。
今の時代に合ったデザインを目指すなら、電話マークは【スマホ】のマークを電話ボタンとして使うのがどの世代にも伝わるデザインであると言えます。
メニューの三本線は通用する？
スマホのレスポンシブ対応でよく見かける（ヘッダーの）グローバルナビに、以下のような三本線のメニューボタンを見かけませんか？
このボタンを押すことでサイトのメインメニューが表示されるのが一般的ですね。
これはWeb業界でいうところの【ハンバーガーメニュー】というボタンです。形がハンバーガーに似てるから、だそうです。
ですが…「Web業界でいうところの」というのが問題で、ハンバーガーメニューなんて言葉は一般の人にはあまり知られてない名称。
つまり、このマークが何を意味するマークなのかも一般の人には伝わりにくいのでは？という説があります。
近年ではスマホでWebサイトを閲覧する機会が増え、これがメニューボタンだという認識も浸透してきていますが、ネットリテラシーの低いユーザーのためを想うならば、例えば以下のように…
カタカナで「メニュー」と表記してあげると分かり易くなりますね。
英語でMENUと書いてもいいですが、より理解できるようにするならカタカナがベストでしょう。
ロゴマークでサイトトップに戻る？
Webサイトを閲覧している時、ふとトップページに戻りたくなる時がありますよね。
そんな時、あなたはどうしていますか？
パンクズリストといって、前のページを辿る道しるべのようなリンクを付けてる記事だったら…
↑ こんな感じのリストがあります。このようにリストの一番左に「ホーム」とか「トップ」といったリンクが置いてあるので、そこを押すことでトップページに戻ることができます。
他には、フッターなどにも同じように「ホーム」とか「トップ」というリンクが置いてあることもありますね。
…ですが、どうでしょう？
ページの一番上には大抵、そのWebサイトのロゴマークが表示されていますよね。ここを押すとトップページに戻る場合が多いです。
当ブログ「ねるはな」もページの一番上にあるロゴマークを押すとトップページに戻れるようになっています。
ただ、これも実はWeb業界では当たり前のことだけど、一般の人にはまだまだ浸透していないのでは？という説があります。
もしかすると、トップページに戻りたいけど戻れないで困ってるユーザーがいるかもしれないので、このことも軽く頭に入れておくと良いかもしれませんね。
シェアボタンは厳選しよう
ブログを書いたらできるだけ多くの人に見てもらいたい！それは誰しもが思うことですが、SEOだけではなかなか難しいものです。
そこで書いた記事には文頭や文末に「SNSでシェアしてね！」ということを示唆するシェアボタンが並んでいることが多いですね。
ただ、このように色々な種類のボタンを配置したところで、さほど需要のないボタンは置く必要もありません。無駄にスペースを取るし、ソースも汚れます。
どんなSNSツールが自分のWebサイトにマッチしてるかを考え、精査することも大切でしょう。
まとめ
今回は、今の時代に合ったWebサイトのデザインについてお話しましたが、全てがあなたのWebサイトに当てはまるとは限りません。
ぼくも常々どういうデザインが（ユーザーとGoogleに）好まれるのか研究しているので、今後もこういった情報があればこの記事を更新したり、新規の記事でご紹介していきたいと思います！
ぜひ参考にしてみてください！
