WEBサイトデザインにおける「8の倍数」を考える

今日はWebサイト構築の際、特に意識している「8の倍数デザイン」について、少しみなさんと共有したいと思います。

WordPressを代表とするCMSの発展により、Webサイトの制作はより身近に、より手軽になってきました。とはいえ、クライアントやユーザーの使用する端末は、PC、タブレット、スマホ等、様々な種類があり、見え方も各々違うため、画像や余白、リンクボタンの大きさの決め方や、全体の横幅サイズなどを決める際、常に迷いがつきまといます。そして制作するサイズについて、絶対的なもしくは正確なルールはないので、また、迷う。好みやセンスもあり、そしてまた、迷う・・・(!!)。そこで、迷う時間を軽減する１つの軸となる「8の倍数デザイン」を用いて、「なるべくどのような端末でも、より多くの方々が、よりストレスが少なくコンテンツを閲覧できる状態を作る」というところに主眼を置き、ユーザーフレンドリーな見え方ができるようにしたいと心がけたいと思います。お客様との大事なブレを見失わないための1つの指針としての備忘録でありますので、そちらはご理解いただければと思います。

ではさっそく「8の倍数デザイン」を用いることによっての利点について、見ていきましょう。

8ポイント方眼デザインの採用

「8ポイントの倍数」にすることにより、一貫性のあるデザインにすることができます。その結果、縦横ともにバランスが整ったWebサイトを美しく見せることができます。

8ポイント方眼デザインの採用

「8ポイントの倍数」にすることにより、一貫性のあるデザインにすることができます。その結果、縦横ともにバランスが整ったWebサイトを美しく見せることができます。

デザインのルールを統一できる

「8の倍数デザイン」を用い、統一したデザインをすることにより、デザイナーにとっては幅・余白のサイズ決めに悩むことも少なくなり、より効率的にワイヤーフレーム・モックアップ作業に打ち込めるようになります。クライアント・プロジェクトメンバーも統一性のあるデザインに触れることで、サイズや配置による齟齬が生じにくくなります。ユーザーも配列の美しいデザインを見ることによって、スッキリとした操作性に富んだWebサイトを閲覧できます。相互的にメリットがあると言えるのではないでしょうか。

コンテンツ幅も迷わない

2020年から過去2年間の日本でのディスプレイ解像度の比率を調べてみました。ほとんどのディスプレイの解像度に「8の倍数」が用いられているのが分かります。実際のシェアが多いモニターサイズを意識しながら、「8の倍数」のコンテンツ幅を決めていくことができれば、ディスプレイサイズのトレンドに合ったWebサイトづくりにより近づくことができると言えます。

< PC >

PCについて、ここ2年間のトレンドとして、日本で使用されているスクリーンサイズは1920x1080、1366x768が最もシェアが高いと言えます。

< タブレット >

タブレットについては、768x1024がダントツですね。数値から見る端末で言うと、iPad 2,3,4,5やiPad Pro(9.7インチ)、iPad miniといったところでしょうか。

< スマホ >

参考資料：StatCounter (2020年9月30日現在)

スマホについては、375x667が多く、その後360x640、375x812と続きます。375x667という数字はApple社・iPhoneのRetinaディスプレイが搭載された携帯になります。Retinaディスプレイは、従来の倍の高画素密度を採用しており、デバイスピクセル比は倍になります。Retinaディスプレイに対応したWebサイトを作成する場合は、少し注意が必要となります。

(例)　iPhone 7の横幅について

従来のディスプレイの場合　→　375px

Retinaディスプレイの場合　→　375px x 2 = 750px

次は、Webサイトのデザインやプロトタイプ 作成時に使用される、Adobe XDのスタート画面を参考に見てみたいと思います。

Adobe XD・ホーム画面より(2020年9月30日現在)

PC、タブレット、携帯、それぞれ上位の端末の種類が入っていますね。ここでもディスプレイサイズのトレンドが明確ですね。

上記のデータをベースに考えますと、「8の倍数」を用いた数値でWeb構築することができれば、先述した「なるべくどのような端末でも、より多くの方々が、よりストレスが少なくコンテンツを閲覧できる状態を作る」ことがより効率的に進めることができるのではないでしょうか。

コンテンツ幅の例

< PC >

960px・1040px・1120px・1200px・1280px　など

< タブレット >

600px・680px・760px・ 840px・920px　など

< スマホ >

360px・440px・480px・520px　など

余談ですが、「8」はキリスト教では復活を連想させたり、西洋では「悪魔の化身」であるタコの足が8本なので不吉な数字とも言われていますが、日本では割と逆なイメージが先行します。「8」は「末広がり」や「八百万の神」や縁起の良い数字と言われています。漢字で書くと「八」として、上から下へ広がる形が「末広がり」の意味があり、「永遠に広がる」「大きくなる」「繁栄する」などとして、希望があり、前向きなイメージとなります。

みなさんはWebサイトをデザインする際、どのようなことに気を使いますか？みなさんが思うWebサイトデザインの思考について、共有していただけると嬉しいです。

それでは、今日もよい1日をお過ごしください。

粋な「日本の伝統色」48選

人はなぜ綺麗な色や、美しい色を追い求め続けるのでしょうか？

今回は和の色、「日本の伝統色」について、少しお話ししたいと思います。デザインやブランディングにおけるお客様との関わりや、色の好みについて、楽しくわかりやすく説明できるよう、ここでみなさんと共有できたらと思いました。

「日本の伝統色」とは、”日本に古（いにしえ）から伝わる色”で、数としては千数百以上あると言われています。そしてその色一つ一つ、全てに名前がついており、おのおの文化や歴史背景があり奥ゆかしい。今回はその中でも、「四十八藍（しじゅうはちあい）」と、「四十八茶百鼠（しじゅうはっちゃひゃくねずみ）」に焦点を当てたいと思います。

「四十八藍」や「四十八茶百鼠」の時代背景は、庶民の華美や贅沢をすることを禁じた「奢侈禁止令（しゃしきんしれい）」が出された江戸時代に遡ります。この禁止令は度々出され、当時の幕府は武士や町人に対し、着物地は絹は禁止、麻か綿を。派手な色は禁止、藍色・茶色・鼠色と細かく指示しました。そんな中、当時の職人が試行錯誤し、規制された中で技術を発展させ、創り出した、藍（青系）・茶・鼠（グレー系）のカラーバリエーションの例えが先ほどの「四十八藍」や「四十八茶百鼠」になります。ちなみに「四十八」は48種類という意味ではなく、ここでは「縁起の良い、たくさんある色彩の種類」という意味に当たります。

そんな禁止令が出ている中、多くの江戸っ子たちはその御触れに反発。他の人とは少しでも違う色を着たいという中で、職人が苦労して生み出したわずかな色の違いを楽しみ、着物の裏地に派手な色を用いたり、洒落た趣向を凝らして競い合いました。そこに「粋」と「文化の繁栄」が芽生え、江戸文化に重要な基盤を遺してくれたのではないかと感じます。

余談ですが、江戸小紋という着物柄も、その頃の時代背景から、遠くから見ると色合いが無地に見え、近くで見ると繊細優美な柄が見えるために生まれたとされています。江戸時代ファッションは、色々と苦労があるようですね。

昨今では、2020年東京オリンピックエンブレムに藍色が、全日本サッカーチームでサムライブルーが、東京スカイツリーにも江戸紫が、などと言ったように、時代を超えても新しくさえ感じます。ブランディング・デザインする中で、色は必ずと言っていいほど関わる分野になります。こういった歴史的背景や知識を共有することによって、パートナーシップとしてのお客様との関わりを深めれること、とても大切だと考えています。

カラープラニングツールとしてオススメなのが、DICグラフィックス社の「日本の伝統色」です。それぞれの色の由来解説があり、優れた色彩文化資料となります。その中から今回は、藍（青系）・茶・鼠（グレー系）に焦点を絞り、近似色の微細なグラデーションを選んで自分なりにまとめてみました。ご一緒に共有できたら嬉しいです。

みなさんはどの色がお好きですか？

粋な「日本の伝統色」48選

参考文献：「日本の色辞典」・吉岡幸雄（紫紅社） 参考資料：DICグラフィックス社・DICカラーガイド　日本の伝統色第９版 (2020年8月27日現在)

本来であれば今日・・・

第32回オリンピック競技大会が東京で開幕される日でした。本来であれば、私は今頃は英国セーリングチームのサポートチームの一員として活動をしている予定でした。

なんとも言えない複雑な思いです。

私はグラフィックデザインのお仕事以外でも、国際交流の進展のため、現在住んでいる神奈川県葉山町の「語学ボランティア」(※1 )という制度に登録しています。その語学ボランティア制度とは、葉山町で行われる世界的なスポーツ大会や様々な国際交流での通訳、語学支援活動を町民が有志で手助けし、外国人が安心して過ごせる地域づくりと、町の更なる国際化を推進することを目的として、2016年から始まりました。私が昨年聞いた時点では登録者数は200名を超え、7カ国語に対応されているそうです。

そういった活動に参加している理由は、20代にバックパッカーとしてアジアやヨーロッパに滞在した際、またその後コンピュータシステムの勉強でニュージーランドに留学した際に、自分が病で倒れた時や現地の言葉がうまくしゃべれなくて困った時など、幾度となく助けてもらいました。身寄りのない地での困難は想像以上に辛く、今度は自分が貢献できることがあれば、恩返しをしたい、積極的に人のためになりたいと思うようになったからです。

私は語学に関してはネイティブでも通訳者でもなく完璧ではありません。が、コミュニケーションは割と得意な方で、少しでも何かの役に立てるのではないかと思い始め、子供達も大きくなってきて、少し自分の事を考える時間ができた2017年、その制度に登録しました。その後、茶道の通訳や、子供達との国際交流イベントの語学支援活動のお手伝いを時折させていただきました。通訳はなんとかなるかな、と思っていました。が、やはり実際、人々の前で言葉をデリバリーするといった作業には経験と鍛錬、緊張を伴います。そのため、通訳の短期講習を受けたりして、自分なりに訓練をしたりしました。

2017年、現・山梨町長が五輪出場を前提とした3年間にわたる事前キャンプに関する協定を締結。神奈川県内で初めてのことだそうです。英国ナショナルチームをホストタウンとして受け入れ、その「語学ボランティア」制度の一環で、チームサポーターとしての募集があり、自分の子供達がたまたま町のヨットクラブに入っている縁もあり、参加することになりました。

私は主にイギリスから来るチーム専属シェフのアシスタントとして、シェフの作る朝ご飯のサポートを担当。キャンプの間はほぼ毎日早朝5:40、家では娘たちの寝顔を見つつ、自転車で５分ほどのチームのキャンプ地である近所の保養所に到着、チームのサポートをします。チームは選手やコーチ、マネージャーに加え、シェフら最大50〜60名にもなる大所帯。朝ご飯の時間はにぎやかになります。そういった選手やコーチ陣と朝ごはんを通じてのやりとりや、葉山町の紹介や案内などの語学支援活動をしてきました。

今年の始め、町民サポートメンバーは有志で「セーリング応援プロジェクト」を結成。東京オリンピックに向け、セーリングスポーツの普及はもとより、地元の地域活性、英国チームの事前キャンプに伴う、町内の機運醸成につなげていこうと活動していました。それにまつわるポスター類の制作にも携わってきましたが、それも今は我慢の時となってしまいました。

「セーリング応援プロジェクト」の打合せ。(後列左から２番目)

突然パンデミックな状況になり、コロナ禍が残した影響は大きく、スポーツというあり方が少し変わってきていることを感じる昨今ですが、それでもやはりオリンピックはアスリートにとって特別なもの。その大きな目標が延期されてしまったことは、アスリートにとってかなりの喪失感だったのではないかと思います。私も実はバレーボールの強豪校にいたことがあり、苦労や絆を感じながら過ごした小学から高校生活。今の自分があるのは、その時がんばった経験があるから、と感じます。

今年はシェフのアシスタントに加え、セーリングの試合会場である江ノ島までオリンピック選手をアテンドする予定でした。特別になるはずだった１日ですが、時代や環境が変わっても、スポーツで勇気と希望を与えてもらいたい、そう願っています。

英国セーリングチームの選手はこちらからご覧いただけます。

※1 2020年7月現在、葉山町語学ボランティア登録は、一定数に達したため、募集は一時中止となっています。