INFORMATION

haconiwaサイトデザイン制作秘話

haconiwaサイトデザイン制作秘話

本日お知らせしましたが、haconiwaはロゴとサイトをリニューアルしました。

まずはこちらの記事をご覧ください。
haconiwaロゴ&サイトリニューアルのお知らせ

ここでは、新しいサイトデザインはどのように考え作られたのか、
グラフィックデザイナーの栗崎洋さんのインタビューとともに詳しくお伝えします。

サイトリニューアルを考えた理由

haconiwaサイトは2015年にリニューアルをしてから4年が経過していました。
今回、ロゴと一緒にリニューアルし、全体的にデザインやコンサプトを統一することで、これからのhaconiwaの方向性を示せたらと考えました。

haconiwaはメディアという立場上、サイトの主役はあくまでも読み物と考えており、読者のみなさんに一番楽しんでもらいたいのは、私たちが日々ピックアップするクリエイティブなモノ・コト・ヒトです。そのため、サイトはあくまでもフラットでニュートラルな箱でありたいなあと考えています。旧サイトもシンプルではありましたが、シンプルであるがゆえにメリハリがないことでカテゴリが分かりづらかったり、行間などのルールづけが少しゆるかったりで、記事の読みやすさをパワーアップしたいなあという想いが一番にありました。

また、「世の中のクリエイティブを見つける、届ける」私たちだからこそ、サイトの中にはシンプルな中にも遊び心を入れたいと考えていました。毎日訪れる人も、訪れるたびにワクワクできるそんなサイトになりたいと、熱い想いを栗崎さんにご相談しました。

デザイナー栗崎さん
デザイナー栗崎さん

読みやすさを一番に考え、デザインに一定の秩序を持たせる

haconiwa grid
栗崎さん:一番時間をかけたのは、土台づくりですね。
サイトを作るときに、あまり複雑かつ、装飾的にしない方がいいだろうなと思ったんですね。シンプルなナビゲーションの方がいいだろうと。
ベースとなる旧サイトは、いい意味でゆるいというか、余白の量が決まっていなかったりとか、それがひとつの個性にはなっていたんですけど、今回はある程度システマチックにした方がいいのでは?と思いました。変化をつける意味もあるんですが、コントロールしやすくなる意味があります。
グリッドを使って、一定のルールを持たせる、秩序を持たせるのはいいだろうと思ったので、グリッドを作ることから始めました。その中で全体の比率を持たせる言葉があるといいなあと思ったので、「白銀比=1:1.414」を使用しました。

haconiwa:ある程度の秩序があることで、とても読みやすくなったなあと思いました。難しかった点ってありますか?

栗崎さん:読みやすさがやはり重要だと思っていて、見る環境によって読む人の動作が変わってくるので、どの環境でも読みやすくなるように余白の量を調整しています。SPは縦の動きになってくるので、PCとSPの余白の量が一緒だと、SPでは少し空きすぎて読みづらくなるので、余白を詰めています。

ウェブの中に一体感がでるようにこだわった、書体、色

color rule
haconiwa:グリッドの他にこだわったポイントは?

栗崎さん:書体と色ですね。かわいすぎず、淡すぎないように気をつけました。使用するカラー数も増やしすぎないように気をつけていますね。色が増えすぎると、印象が散漫になってしまうので。増やすのは簡単なんですけど、減らすのは大変なんです。ウェブの中に一体感がでるように、気をつけました。

haconiwa font
haconiwa font

haconiwa:オリジナルフォントも制作いただきました。

栗崎さん:今回カテゴリ名などの見出しで使用していますが、そこにアイデンティティがあれば、統一されてくるだろうなあと思い、制作しました。

遊び心をプラスしたり、人格を持たせたり、要所要所でメリハリをつける

haconiwa web
haconiwa サイトTOPページ。EXHIBITIONとOMIYAGE CLIPには遊び心をプラス

haconiwa:最初のデザインの時もほぼ現状のデザインに近かったですが、修正でもう少し遊び心を入れて欲しいとお願いしました。

栗崎さん:グリットにすべてを入れすぎたために、多少大人しくなっていた、メリハリがなくなっていたので、遊び心を入れたことで良くなるだろうなとは思いましたね。
遊び心を入れると、子供っぽくなる要素があるので、そこは気をつけています。EXHIBITIONの吹き出しとかも一見すると子供っぽくなってしまうものだけど、そうなりすぎないように気をつけました。色に助けられているところもありますね。この色のおかげで現代的な印象を担保しているところがある気がします。色があって、その上にコンテンツがあって、その上に遊び心があるみたいな構成にしています。実際動くの見ると感動しますよね。
読んでいるときは、やっぱり楽しく読めるメディアだと思うので、なるべく真面目になりすぎないようには気をつけましたね。旧サイトのイメージとだいぶ変わって、メリハリをつけたり、動きも入ったので、遊び心は見ていただけたらなと思います。

haconiwa:その他、みなさんに見てもらいたいポイントなどありますか?

haocniwa about
haconiwa サイトABOUTページ。フォントで人格を表現している

栗崎さん:ABOUTページですね。ABOUTやCONCEPTテキストの書体は明朝体にしていますが、ここはサイトの人格や話している口調を想像して書体を選んでいます。みなさんがもっているブランドイメージがどういう話し方をするんだろう?と考えています。haconiwaの場合は、品がありつつ少しやわらかい。haconiwaさんという人がいたとするとそういう話し方をするのではないか?と思って少し柔らかい明朝体を選んでいます。
ABOUT ページは、理念を伝えるところなので、トップにムービーを入れたり、展開例を入れたりすることで、全体で表現できたらと思いました。
あとは、主役はコンテンツであり、デザインが勝ちすぎるのは良くないと思っているので、たくさんある素敵な記事を楽しんでもらえたらと思っています。


以前よりも見やすさ、楽しさがパワーアップしたサイトになったと思っています。
読者のみなさんにも楽しんでもらえたら嬉しいです。

また、ロゴデザイン制作秘話も公開中です。ぜひこちらもご覧ください。
新生haconiwaをどうぞよろしくお願いいたします。
(編集部一同)

サイトデザイン・ディレクション:栗崎 洋
国内デザイン会社を経て、株式会社佐藤卓デザイン事務所に入社。2015年9月独立。ブランディングを中心に、ロゴ、空間、パッケージ、ウェブ、装丁などグラフィックデザインを軸にしながら広い領域で活動。東京以外の地域や、留学経験を生かしたアジアの海外案件等、場所を問わない活動も増加している。東京TDC賞2017入選、台湾国際グラフィックデザインアワード2017優秀賞・2017台北デザイン賞優秀賞、他。
URL : www.hiroshikurisaki.com
Mail : kurisaki@hkdesign.jp

ムービー制作 :株式会社メディアグラフィックス

ムービーサウンドエディター :畠中悠輔

EXHIBITION

いまオススメの展示・イベント

//*---- ▼ ここからSNS ----*// WEAR_ロゴ OMIYAGE CLIP H A C O N I W R E T S