会社サイトリニューアルの検討と実際：デザイン編 第1回 コンセプトの解釈とデザインルールの設定
ピクセルグリッドの会社サイトのリニューアル時に、どのようにデザインを考え、実装していったかを紹介します。まずはリニューアルのコンセプトと、それをデザインルールにどう反映したかということです。
- カテゴリー
- デザイン
- PixelGridのこと
発行
はじめに
2023年7月12日にピクセルグリッドの会社サイトがリニューアルされました。リニューアルされた会社サイトは、黒と白を基調にして装飾が極めて少なく、余白が広めのデザインになっています。
本連載は、公開されている会社サイト上へは記載されない、リニューアル時の背景や意図を紹介するシリーズのデザイン編です。この記事では、設定されたコンセプトをどのようにデザイナー側で解釈したかと、そこからどんなデザインルールを実際に設定し、デザイントークンのファイルへ反映したかを紹介します。
技術的なシリーズ
リニューアルにおける実装的な観点からの解説は、別途、技術編シリーズとして配信予定です。
コンセプトの設定と解釈
会社サイトリニューアルの話がはじまると、次のようなコンセプトが設定されました。
- ウェブ標準技術を積極的に利用しよう
- 素直なレイアウトを目指そう
- シンプルを目指そう
- 軽量・高速を目指そう
- 可読性を確保しよう
内容をざっと見てみると、デザインに強く影響を与えそうなものからそうでもないものまで混在しているように感じられますが、すべての項目がデザインに強く影響を与えるべきと筆者は受け取りました。
それは、ピクセルグリッドがフロントエンド分野での受託開発を生業にしている会社だからです。ピクセルグリッドは、各種フレームワーク、HTML、CSS、JavaScriptなどといった分野への強みとこだわりを持っています。そのようなバックグラウンドは、当然、会社が醸し出す雰囲気へも影響を与え、それらがいわゆる「ピクセルグリッドらしさ」というものに昇華していきます。ですので、会社という無形の存在を具現化したサイトのデザインにも「らしさ」がにじみ出ている必要があると考えました。
それでは、これらのコンセプトにおいて、デザインをどのように考えたかを説明します。
ウェブ標準技術を積極的に利用しよう
フォーカスリングについて取り決めた、今回のデザイントークンの一例。「例外を除き、フォーカスリングはデフォルトのまま利用します」としている。
※細かなところは下記のリンクから、大きな画像でごらんください。
ウェブ標準にはさまざまな仕様が記載され、各ブラウザにはそれに従った実装がされています（多少の差異はあれど……）。前述しましたが、ピクセルグリッドはフロントエンド分野を生業にしている会社ですので、ウェブ標準や各種ブラウザとの関係は密接です。であれば、デザイン過程でもそういった仕様や機能に対する敬意が感じられることが重要と考えました。
リンクはリンクとして振る舞い、ボタンはボタンとして振る舞う。一見、当たり前なことのように感じられてしまうかもしれません。しかし、世界で公開されているウェブサイトを眺めてみると、思いのほか独自の実装を施したUIが多いことに気が付きます。このような状態はピクセルグリッドの「らしさ」にはあまり馴染みません。後に挙げる「シンプルを目指そう」にもつながりますが、デザインには過度なハックを必要とするような挙動を持ち込まず、なるべく素直なサイトとなるように心がけました。
素直なレイアウトを目指そう
リニューアルした会社サイトの一部分。凝った配置ではなく、素直なレイアウトとした。
前項目のウェブ標準の積極利用とも密接に関わってきます。現在のブラウザには、さまざまなレイアウトを実現するための機能がすでに備わっています。もちろん、現在の標準技術があらゆるレイアウトをカバーしているかというと、そうではないとは思いますが、特別なことを望まなければ標準技術のみで十二分にレイアウト制御が可能です。そのため、デザインの実現にJavaScriptによる監視や制御を必要とするような指定をせずに、ブラウザが備えているCSSの機能でもって実現が可能なレイアウトを目指しています。
シンプルを目指そう
リニューアルした会社サイトの一部分。テキストとアイコンを主体とした、シンプルなデザインにした。
「シンプル」をどのように解釈するかは、会社や個人によって大きく違いがでるところでしょう。そして、ピクセルグリッドの会社サイトリニューアルに向けては、ピクセルグリッドらしさのある「シンプル」を目指さなければいけません。
ピクセルグリッドの開発スタイルは、無駄が増えることを良しとしていません。たとえば、とても小さな機能を得るために、過剰で多機能なJavaScriptライブラリを導入したり、作業者の手間を度外視することによってのみ実現される機能は敬遠されます。とにかく必要のないモノや不要な作業は削減されるべきというスタンスです。
逆の視点で見ると、必要最低限の機能や効率化のための努力は歓迎される傾向がありますので、デザイン作業においても無駄な要素が入り込まない意識をしました。具体例については、この記事の後半のルール設定の節で多く登場します。
軽量・高速を目指そう
軽量・高速は、ピクセルグリッドが常に意識している項目です。軽量で高速なサイトはあらゆる人にメリットを提供します。デメリットは存在しません。サイトが軽すぎて困る人はいませんし、同様にサイトが高速すぎて困る人もいません。そして、これを実現するにはデザインの段階から意識をする必要があります。
過度に大きな画像の読み込みや、無用な処理はサイトの企画やデザインの段階で生み出されます。逆にいうと、企画やデザインの段階で無駄を削ぎ落とすことができれば、実装の段階で軽量・高速を妨害する要素が入り込みにくくなります。これらに対するデザイン側の責任は重大です。
可読性を確保しよう
リニューアルした会社サイトの一部分。全体的に余白がゆったりと設定されている。
新しいピクセルグリッドのサイトの余白は全体的にゆったりとした設定をしています。これまでの会社サイトの余白設計に窮屈さを感じていたということへの反動もありますが、単純に文字や文章の可読性を向上させたいという意図がありました。
ここまで何度か書いたように、ウェブ標準技術にはさまざまな仕様が策定され、ブラウザではそれらの挙動を多く実現しています。しかし、その対象を日本語組版という特殊な範囲に絞ってみると、機能の実装は十分とは言えません。ブラウザが細かな設定や指定を受け付けていないということは、厳密にそれを実行しようとすると独自の制御と実装が必要になってきますが、それはあまり現実的ではありません。それに、ここまで書いてきたコンセプトにも矛盾することになってしまいます。
そこで、ひとつの解決方法として挙がったのが余白の確保です。ギュッと詰まった狭い範囲での可読性確保を実現するには現在のブラウザ機能は十分ではありませんが、比較的ゆったりとした余白設定のなかであれば、細かな設定ができずとも「らしさ」の実現と、可読性の確保の両立が行いやすいのではないかという予測がありました。
デザインのルールを設定する
次に、会社サイトのデザインを進めるために、まず、コンセプトを意識したルールを設定しました。
- 余白
- 書体やサイズ
- 色
- 線幅
- 角丸と影
- フォーカスリング
- リストのビュレット
- ハイパーリンク
- 外部リンク
いわゆるデザイントークンと言われる既定値の内容も含まれますが、それとは違い、宣言になっているものもあります。いずれの設定内容も目的は同じで、二つの目的があります。デザイナー自身の揺れやミスを吸収するためが一つ。もう一つは、デザインの意図に曖昧さをなるべく含まず、より正確に実装者へ伝達するためです。
もちろん、すべて完成された設定を事前に用意できたわけではありません。デザインを進めながら同時進行で育てていきました。
余白
余白に関する、今回のデザイントークンの一部。2、4、6、10、16、26、42、68、110、178ピクセルという10種類の余白が定義されている。
余白は全部で10種類用意しました。会社サイト上のすべての余白はこの10種類で構成されています。余白が事前に宣言されることによってデザイン上での余白設定に曖昧さがなくなりますし、実装者も余白の全量を把握した上で作業に取り掛かれるので、デザインデータと実装者の間に齟齬が入り込みにくくなります。
また、今回のサイトリニューアルでは、デザイン上で縦や横の整列を意識するためのレイアウトグリッドを設定しませんでした。レイアウトグリッドは静的なレイアウトとの親和性は高いと感じますが、柔軟にレイアウトが変更されるウェブサイトとの親和性はそれほど高いとは思えなかったからです。
ブラウザのレイアウトと描画は基本的に左上から下方向に積まれていきます。画面幅が変化したりテキストの増減によって高さが変われば、隣接する要素の位置も柔軟に変化しますので、画面全体に設定された仮想境界のレイアウトグリッドでは対応しきれなくなる場面が多くなっていきます。
それであれば、HTML/CSSとの親和性の高いgap、padding、marginというような余白設定系のプロパティと同様の考え方を用いて、最初から上から下（または左から右）に積まれる前提のレイアウトを作成したほうが実用に近いのではと考えました。幸いピクセルグリッドがデザイン作成ツールとして利用しているFigmaには、オートレイアウトというブラウザのレンダリング方式を模倣する機能が備わっていますので実践は容易でした（デザイン作成当時はFigmaの変数機能はリリース前だったので利用していません）。
書体やサイズ
書体やサイズに関する、今回のデザイントークンの一部。font-family、font-size、line-height、font-weight、letter-spacing、font-smooth、OpenType機能について定義されている。
※細かなところは下記のリンクから、大きな画像でごらんください。
font-size、line-height、font-weight、letter-spacingについては、余白設定と同様に利用する設定値をあらかじめ宣言しています。
特筆すべき部分はfont-familyとfont-weight部分でしょうか。今回のサイトリニューアルでは、書体にNoto Sans JPを指定していますが、Google Fontsがホストするウェブフォントは利用せずに、バリアブルフォントをセルフホストすることでブラウザへ提供しています。加えてビルド時には、サイト上で利用されているグリフのみのサブセットを作成しています。
バリアブルフォント
バリアブルフォントは太さや字幅といったバリエーションを可変にできる作りになっているフォントです。次の記事に詳しく解説されています。
なにやらややこしいことが羅列されていますが、これらはすべて可読性を維持しつつ軽量・高速なサイトを提供しようとするコンセプト実現のために採用されました。技術的な詳細は技術編のシリーズで紹介されると思いますので、ここではデザイン的に影響の大きいfont-weightのみ紹介します。
通常、ウェイトごとに分割されたフォントファイルを利用した場合は、利用しているウェイト数のファイル読み込みが必要になってきます。特に日本語フォントはファイル容量がアルファベットフォントに比べて大幅に大きくなりやすいため、利用するウェイト数は絞られる傾向にありますが、バリアブルフォントであれば利用ウェイト数によるファイル容量の増加はありません。
そうするとデザイン的にもfont-weightの選択肢は大幅に広がります。Noto Sans JPのバリアブルフォントのウェイトは100から900までの間を1刻みで指定可能ですので、実質ウェイトの指定はデザイナーの自由ということになります。結果的に今回のリニューアルでは8つのウェイトを宣言して利用しています。
色
色に関する、今回のデザイントークンの一部。会社サイトで利用されている15個の色が定義されている。
※細かなところは下記のリンクから、大きな画像でごらんください。
色指定については非常にシンプルなものになっています。ブランドカラーも含めてサイトで設定しているカラーは15色のみになります。この背景にはそもそもピクセルグリッドのブランドカラーが黒と白という単純なものであったというのもありますし、コンセプトとしてシンプルを目指すというものがあったので、極力色味を導入しないという力が働いたからです。
特別な指定としては、黒をBlackとPure Blackの2色、白をWhiteとPure Whiteの2色に分けている部分でしょうか。それぞれの色指定は次のようになっていて、Pureがついてないほうの色は濃度が下げられています。
- Pure Black:
#000 - Black:
#21252C - Pure White:
#FFF - White:
#F9FAFB
そして、リニューアルされたサイトをDevToolsなどで見ていただくとわかりますが、通常利用されている黒と白はBlackとWhiteのほうになっています。黒と白のコントラスト比で比べると次のようになっています。
- [Pure BlackとPure White] 21:1
- [BlackとWhite] 14.71:1
コントラスト比の変化を見ていただくとわかるように、濃度を下げた意図は黒と白のコントラスト比を低減させる目的からです。サイトデザイン当初は完全な黒と白の設定しかありませんでしたが、高コントラスト表示による強い刺激を避けるためにこの設定が導入されました。濃度的には単体で見れば十分に黒と白に見えつつも、実際のコントラスト比は低下している状態を目指しています。
線幅
罫線の線幅に関する、今回のデザイントークンの一部。1、2ピクセルという2種類の線幅が定義されている。
線幅は2種類設定しました。こちらも必要最小限にとどめています。基本的には線は利用せずにデザインを作成し、どうしても視覚的に文脈を強く区切りたいときに1pxを利用しています。2pxのほうは特別で、黒塗りのボタン状要素のホバーとアクティブ時にのみ利用しています。これは、1pxだとどうしても色の面積が足りずに変化が乏しい場合に利用していました。
2pxの罫線を使っている箇所のデザイントークン。
前にあるように、今回のリニューアルでは線自体をなるべく利用しないようにデザインしていました。それは、後述するハイパーリンク側で下線を採用していたのが一つと、もう一つは、コンセプトの実現でした。
罫線はデザイン的にとても使い勝手のよい要素ですが、同時に、閲覧側は線を認識する労力を負担しなければならないという副作用があります。ですので、線が無くても成り立つのであればなるべく使わないという選択をすることで、コンセプトにある「シンプル」を実現しようとしています。
角丸と影
角丸と影に関する、今回のデザイントークンの一部。角丸と影を利用していないことが明記されている。
角丸と影については今回のサイトリニューアルでは利用していません。コンセプトにあるピクセルグリッドらしいシンプルを実現するためです。デザイントークンへのルールの記載としては、実装者の視点でみると「利用なし」という事実が有効な情報になるので明示するようにしています。
フォーカスリング
フォーカスリングに関する、今回のデザイントークンの一部。
※細かなところは下記のリンクから、大きな画像でごらんください。
フォーカスリングをどのように取り扱うかについても記載をしていました。コンセプトにあるウェブ標準技術を積極的に利用しようという部分に深く関わっています。
フォーカスリングはキーボードで操作する閲覧者にとって、サイトからの非常に重要なフィードバックとなるため、ウェブ標準技術を積極的に利用しようというコンセプトであれば、除去するという選択肢はありません。なるべく素のままの利用を目指すことを記載しつつ、フォーカスリングが欠けてしまう場合の例外について記載していました。
フォーカス機能に関する検討
フォーカス機能について、ユーザー操作の多様性から考えた座談会が、次の記事にあります。
リストのビュレット
ビュレット付きリストに関する、今回のデザイントークンの一部。CSSの機能でハイフンを利用することが明記されている。
リストのビュレットについても特別なことをしない方針は変わりません。ブラウザに実装されている機能を採用することで、ウェブ標準技術をシンプルに利用しています。
ただ、実装時には、ハイフンとテキストの間などの調整がしにくかったことから、SVGで線を引く作りに変更したようです。これについては、技術編のシリーズでも触れる予定です。
ハイパーリンク
リンクに関する、今回のデザイントークンの一部。ハイパーリンクにはアンダーラインを常時設置することが明記されている。
ハイパーリンクも素直に使います。昨今のリンクスタイルはデフォルトでアンダーラインを消しつつ、ホバーなりのアクションがあって初めてアンダーラインが付与されるといった挙動を示すものが多く見受けられます。この指定自体は筆者自身も使いますし、デフォルトでアンダーラインがあるとデザイン的な見栄えやリズムに影響を与えるというのもデザイナーの視点になって考えるとうなずけます。
ただ一方で、初期状態でアンダーラインのないスタイルは「ハイパーリンクがそこにある」という事実を視覚的に提供することができていません。どちらを優先してデザインに反映するかは、その時々の序列や力関係によって変わってくるかと思いますが、今回のリニューアルではコンセプトと照らし合わせて、「ハイパーリンクにはアンダーラインを常時設置する」を選択しています。
外部リンク
外部リンクに関する今回のデザイントークンの一部。外部リンクには専用のアイコンが付与されることが明記されている。
※細かなところは下記のリンクから、大きな画像でごらんください。
外部リンクには専用のアイコンが付与されるように設定しています。これはウェブ標準技術の利用とは違う、独自の実装に当たる部分です。コンセプトに照らし合わせると「シンプル」の部分で、必要な努力に当たる機能でしょうか。
一括で指定できる内容なのでルール化しています。ルールの中では、単純にアイコンを付与する場合に加えて、すでに別のアイコンによって遷移先が予測できる場合は外部リンクのアイコンを付与しない例も記載しています。
挙動としては、内部リンクと外部リンクを事前に視覚的に区別できるようにするというもので、それ自体は珍しい部類の対応ではありません。ハイパーリンクのアンダーラインでリンクの存在自体は表面化することができましたが、今度は「どこに遷移するのか？」が不明なので、最低限の情報として外部リンクマークを付与する対応をしているというものです。
まとめ
改めて言及するまでもありませんが、コンセプトの解釈やルール設定は、その後のデザインの方向性に大きく影響を与えます。そういった意味でも、今回の記事で紹介した内容の延長線上にリニューアルされたピクセルグリッドの会社サイトがあります。ですので、事前に設定したコンセプトやルールが、結果的にどのように反映されているのか気にしながらサイトを見ていただくのも、良いかもしれません。
次回は、デザインデータ作成に利用したFigmaの機能と、ブラウザに実装されているCSSの挙動の差異について、どのように対応したかについて紹介します。