Yokohamaのウェブサイトとしては初めて大幅なデザイン変更を行いました。Simplyに移行したときですらデザイン的には変更されていません。それが今回、テイストはそのままに「より見やすいページ」を目指してデザインを変更しました。旧デザインの話と、新しいデザインについて旧デザインは新たに起こされたものではなく、一時的なウェブサイトとして使用していたWordPress版のレイアウトを踏襲しており、「一般的なブログレイアウト」になっていました。Simply、そして書き起こしたデザインCSSという組み合わせが「WordPressの機能を完全に満たす」ことを目標としたためで、移行したことを感じさせないことが目標だったからです。WordPressで使用していた機能を完全に網羅した今、それは必要ありません。新しいデザインに踏み出すときです。新しいデザインでは、なにより「読みやすく、見やすく」を優先しました。Yokohamaのお仕事として9つのウェブデザインを行っており、中には「アクセシビリティのために攻めた」デザインのものもあります。(特に私自身のウェブサイトにおいて)その結果、現実的に読みやすいウェブサイトはどのようなものであるか、ということがわかってきました。デバイスやブラウザの機能によらず使いやすい機能もです。そこで、これらの研究によって得られた「本当に読みやすいウェブサイト」を形にしました。別の側面から見ると、旧デザインは「慣れた、みんなと同じデザインが一番使いやすいのである」というデザイン界での主張に異を唱えるものであり、使いやすさを真剣に考えるべきであるという主張が盛り込まれています。実際、新しいデザインはウェブにおいては一般的にあまりみないレイアウトです。これは、デザイン界において常識として使われているものが、実際にユーザーには理解されておらず使われていない、あるいは不快に感じているにも関わらずそれを我慢するしかないので我慢しているだけ、という現実がリサーチによって得られたことを反映しています。華やかさ、豪華さは減りますが、読みやすさを最優先にする、というのが基本です。見やすさやアクセシビリティに対する配慮もさらに進めました。印刷時に必要のない要素が取り除かれ、紙面を活かすように調整もしています。この方針のためにちょっと見た目は寂しくなってしまったかもしれません。それはやむを得ないことです。Yokohamaのウェブサイトは文章量も多いので、読みやすいというのが何よりなのです。CSSによってskin.cssを上書きすることで見やすくできる」という特長を維持してきました。YokohamaのデザインCSSはそれなりに複雑であることを考慮して、現実的にskin.cssを編集することはないものとして、layout.cssを廃止して全てskin.cssにまとめました。これにより、少しだけですが軽く、早くなりました。バグが少しだけ発生しづらくなりました。ナビゲーションメニューPC版ではサイドに並んだナビゲーションボタンを採用。ボタンは画像ではなく、Unicode絵文字(!)です。わかりやすいよう、カラー絵文字のフォントを指定しています。EmojiかJoyPixelsが入ってないと出ないかも...ナビゲーションはページ内リンクになりました。JavaScriptなどは使っておらず安定して使うことができます。ちなみに、元の位置に戻りたい場合は、大抵のブラウザでブラウザのバック機能を使うことができます。ページ内リンクは原始的な機能であり、大抵のビジュアルウェブブラウザで利用可能なこと、JavaScriptなども必要ないこと、ブラウザバックで元の位置に戻れることなどメリットが大きく、できるだけページ内リンクを活用するのが良いエクスペリエンスにつながる、という研究結果を反映しました。TOPリンクと、ページ先頭に並べられたナビゲーションボタンとの組み合わせによって使い心地を改善しています。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の一般的な明朝体フォントの指定が入りました。ビギナーオリエンテッド「コンピュータに詳しくない人がアクセスしたときに自然に読みやすく表示されるように」というコンセプトは変更されていません。「軽量・アクセシブル」という点についてもです。Yokohamaのウェブサイトのデザインが新しくなりました。読みやすく、より見やすく。徹底的にお客様に寄り添う視点で作り直しました。Yokohama別に表記のない場合、価格は全て税抜きです価格は各種キャンペーン適用の価格ですプライバシーポリシーサイトについてのお問い合わせ:webmaster@mimir.yokohama。