いつも弊所ホームページをご覧いただきありがとうございます。今回は少しデザインについて記事を書いてみたいと思います。

昨今のデバイス事情やWeb技術の状況を鑑み、弊所Webサイトのデザインリニューアルと、内部構造改善（タグ適正化等）を行いました。理由は色々とありますが、大きくは2つとなります。

全画面デバイスの登場

日本国内で人気の高いiPhoneシリーズが、X以降全画面デバイスとなりました。

最近まであまりそのことを深く考えておりませんでしたが、昨年末ごろiPhone Xでの操作感や、画面（Webサイト）の見え方を体験する機会を得まして、

「これは今までの考え方のWebデザインではマズイ」

と思い、実験・勉強を兼ねまして、弊所Webサイトのリニューアルを思い立つこととなりました。

高解像度モニターへの対応

最近、横幅が広い（横幅のピクセル数が多い）モニターが増えています。

かくいうCOLORSでも実務ではW:2560px × H:1440pxのモニターを使用し作業を行なっておりますが、これまでの伝統的Webデザインで確立されてきた（のではないかと私が勝手に思っている）横幅960pxのコンテンツ幅でのデザインでは、昨今のモニターの表示領域に対して、対応が難しくなってきている状況があります。

幅広の画面を使用することで横の余白が多くなり、よりコンテンツに集中して読み進めてゆける、と私自身は感じておりますが、その余白がデザイン的に気になるという方もいるようです。

私自身は、自分のデザインにこだわりがないのがこだわりですので、私の実力が及ぶ限り、どのような表現にも対応してゆきたいと考えております。

私が考える幅広画面への対応法

現在の主流PCモニターの解像度はW:1920px × H:1080pxだそうです（このWebページを参考にさせていただきました。ありがとうございます）。

この表示幅全体までブラウザを広げてWeb閲覧を行う方はそう多くないとは思いますが、いわゆるリキッドレイアウトと呼ばれる手法で、テキストを画面幅に合わせて伸ばすデザインにすると、1920pxの場合、1行の文字数がものすごく多くなってしまい大変読みづらいデザインとなってしまいます（リキッドレイアウトの代表といえばamazonでしょうか）。

これはデザイナー的には完全に「NO！」なデザインです。（別にamazonをNO！と言っているわけではなく、1行の文字数が長すぎるのが、ですよ、念の為。私、amazonヘビーユーザーですし。）

では、どう対応すべきかというと、やはり従来どおり、横幅を確定してしまう手法が最善ではないかと考えます。

ただ、横幅を確定すると言っても、pxでの指定（960pxなら960pxと決めてしまう）で決めるのではなく、1文字のサイズをデザインのベースと考え、横幅を決めてゆく（横幅を○○文字数分と決める）手法です。ですので、ベースの文字サイズが変われば、横幅の長さも変わります。

この手法は、印刷物のデザインでも私が取り入れている手法ですし、おそらく多くの方がグラフィックデザインに取り入れている手法ではないでしょうか。

私のグラフィックデザインの手法は、ほぼ完全に自己流ですので、この手法がどういうものなのかということをもう少し詳しく掘り下げて説明させていただこうと思います。

これはグリッドシステムという考え方とタイポグラフィと呼ばれる体系から、私が大きく影響を受けたものなのですが・・・。

少し長くなりそうですので、続きは次回にて。