デザインのリニューアル

概要

Mimir Yokohamaのウェブサイトとしては初めて大幅なデザイン変更を行いました。

これまで小規模な変更をしていましたが、WordPressからPureBuilder Simplyに移行したときですらデザイン的には変更されていません。

それが今回、テイストはそのままに「より見やすいページ」を目指してデザインを変更しました。

旧デザインの話と、新しいデザインについて

旧デザインは新たに起こされたものではなく、一時的なウェブサイトとして使用していたWordPress版のレイアウトを踏襲しており、「一般的なブログレイアウト」になっていました。

これは、PureBuilder Simply、そして書き起こしたデザインCSSという組み合わせが「WordPressの機能を完全に満たす」ことを目標としたためで、移行したことを感じさせないことが目標だったからです。

しかし、WordPressで使用していた機能を完全に網羅した今、それは必要ありません。 新しいデザインに踏み出すときです。

新しいデザインでは、なにより「読みやすく、見やすく」を優先しました。

Mimir Yokohamaより後に私は自分のウェブサイトとして4つ、Mimir Yokohamaのお仕事として9つのウェブデザインを行っており、中には「アクセシビリティのために攻めた」デザインのものもあります。 (特に私自身のウェブサイトにおいて)

その結果、現実的に読みやすいウェブサイトはどのようなものであるか、ということがわかってきました。 そして、デバイスやブラウザの機能によらず使いやすい機能もです。

そこで、これらの研究によって得られた「本当に読みやすいウェブサイト」を形にしました。

また、別の側面から見ると、旧デザインは「慣れた、みんなと同じデザインが一番使いやすいのである」というデザイン界での主張に異を唱えるものであり、使いやすさを真剣に考えるべきであるという主張が盛り込まれています。 実際、新しいデザインはウェブにおいては一般的にあまりみないレイアウトです。 これは、デザイン界において常識として使われているものが、実際にユーザーには理解されておらず使われていない、あるいは不快に感じているにも関わらずそれを我慢するしかないので我慢しているだけ、という現実がリサーチによって得られたことを反映しています。

新デザインの基本的な方針

華やかさ、豪華さは減りますが、読みやすさを最優先にする、というのが基本です。

もちろん、見やすさやアクセシビリティに対する配慮もさらに進めました。 印刷時に必要のない要素が取り除かれ、紙面を活かすように調整もしています。

ただ、この方針のためにちょっと見た目は寂しくなってしまったかもしれません。 でも、それはやむを得ないことです。Mimir Yokohamaのウェブサイトは文章量も多いので、読みやすいというのが何よりなのです。

変更点

Layout CSSの廃止

かなり以前からあるウェブサイトから、「User CSSによってskin.cssを上書きすることで見やすくできる」という特長を維持してきました。

しかし、現実的にユーザースタイルシートを書くのが難しく、またMimir YokohamaのデザインCSSはそれなりに複雑であることを考慮して、現実的にskin.cssを編集することはないものとして、layout.cssを廃止して全てskin.cssにまとめました。

これにより、少しだけですが軽く、早くなりました。 また、バグが少しだけ発生しづらくなりました。

ナビゲーションメニュー

PC版ではサイドに並んだナビゲーションボタンを採用。

ボタンは画像ではなく、Unicode絵文字(!)です。 わかりやすいよう、カラー絵文字のフォントを指定しています。 多分、比較的新しいWindowsやMacならちゃんと出るはずですが、LinuxだとNoto Color EmojiかJoyPixelsが入ってないと出ないかも…

ナビゲーションはページ内リンクになりました。 なのでJavaScriptなどは使っておらず安定して使うことができます。

ちなみに、元の位置に戻りたい場合は、大抵のブラウザでブラウザのバック機能を使うことができます。

ページ内リンクは原始的な機能であり、大抵のビジュアルウェブブラウザで利用可能なこと、JavaScriptなども必要ないこと、ブラウザバックで元の位置に戻れることなどメリットが大きく、できるだけページ内リンクを活用するのが良いエクスペリエンスにつながる、という研究結果を反映しました。

モバイル版では従来どおりのBack to TOPリンクと、ページ先頭に並べられたナビゲーションボタンとの組み合わせによって使い心地を改善しています。

これはJavaScriptのない環境で「Back to TOP」リンクを使用して先頭に戻った後、ページ先頭のナビゲーションボタンで移動するという二段階ですが、JavaScriptが利用可能な環境(恐らく、スマートフォンなどの環境であれば極めて高確率で利用可能)ではJavaScriptを利用した切り替えによりよりわかりやすいナビゲーションが利用可能です。

ハンバーガーメニュー

ほとんど押されることがない三本線のハンバーガーメニュー。

一般的で誰でもわかるデザインとされていますが、実際には若い方でもハンバーガーメニューを認識していない、という問題を把握しています。 そのため、初期はハンバーガーメニューを中心としたナビゲーションでしたが、初期の段階でナビゲーションセクションをページ中にも配置するように変更され、重複して置かれていました。

今回、ナビゲーションボタンでページ内の要素に飛ぶ方式に変更されたので、ハンバーガーメニューは完全に廃止されました。

ちなみに、ハンバーガーメニューは純CSSで書かれていて、技術的なアピールポイントだったのですが、アクセシビリティにも寄与しないものでした。

細かく対応されたデバイスサイズ

スマートフォンやタブレットの画面の大きさ、ラップトップにおけるドット数とスケーリングなどに細かく対応するようになりました。

今まではタイリングしたとき(つまり1/2サイズで)2カラム構成を維持するようにしていましたが、少なくともFullHD以下の場合はタイリング時にモバイルレイアウトを採用するように変更しました。

ただし、4kの対応は、4kディスプレイでフルサイズで表示すると「大きすぎる」ので、タイリング時に適切な余白になるように意識しました。

カラムレイアウト

PC版ではナビゲーションボタンによるナビゲーションという方針に変更したため、サイドカラムは廃止しました。

従来、サイドカラムは記事に対して短いために、「ずっと記事が左側に寄っている」という違和感があり、また表示領域も必要以上に狭かったので、これを最適化しました。

フォントサイズ

旧版でも最後のほうで少しだけ入れていましたが、フォントサイズが少し大きめに表示されるように調整しました。

フォントサイズの調整はかなり細かく行っています。 具体的には、タブレットサイズ(スケールされたラップトップの1/2よりも大きい)で110%、PCサイズで115%、PCフルサイズで125%です。

技術的なシンプル化

旧デザインで使われていた「アピール要素を兼ねて不要なまでに高度なテクニックを駆使する」というものは廃止され、構造的にも論理的にもシンプルなものになりました。

継承点

カラーデザイン

コントラストがやや低めで、少しだけウォームという「やさしいカラーデザイン」に変更はありません。

フォント指定

従来から随時見直されているフォントについては今回大きな変更はありません。 ただし、見出しフォントに関しては単純にsans-serifを使用するように変更されました。

本文フォントについても商用フォントの指定はなくなり、早い段階でserifを要求するようにしました。 また、FontConfig環境でserifを欧文フォントにしている方などのために、serifより後ろにLinuxの一般的な明朝体フォントの指定が入りました。

ビギナーオリエンテッド

「コンピュータに詳しくない人がアクセスしたときに自然に読みやすく表示されるように」というコンセプトは変更されていません。

もちろん、「軽量・アクセシブル」という点についてもです。