デザイナーの視点 vol.001 読ませるサイトデザイン『気仙沼ニッティングのブランド』を分析

気仙沼ニッティングのウェブサイトデザインから感じるのは
サイト全体が、誇りを持って作り上げた商品と気仙沼ニッティングのストーリーを じっくり丁寧に魅せる・読ませる、想いを込めたブランドフォトブックのようなイメージになっている、ということです。

気仙沼ニッティングは、東日本大震災での気仙沼の被災の後に設立された会社です。
気仙沼に雇用を作り、そしてそこで働く人の「働く喜び」「誇り」に重きを置き、その人たちが「最高」と信じられる商品を大切に届ける。
そんな想いやコンセプト・物語が美しい写真と丁寧な言葉で綴られており、その言葉や想いが読み手に優しく染み入るように伝わるサイトデザインになっていると思います。

ページ全体を通して、広めにとった余白とフォントの選び方、落ち着いたトーンの写真の配置で、ブランドコンセプトに沿った、誠実で温かく品のある印象を与えます。

テキストは、記事の内容を含め、文字が大きめに使われています。
文字を大きく使うと垢抜けない感じになりがちですが、やわらかで優美な印象と自然な温かみを感じさせるA1明朝のテキストとその少し開いた文字間、そして贅沢な空間使いにより 、丁寧で洗練された、読ませるページが作られていると思います。

目を引く手書き文字のアニメーション部分の下をクリックすると、気仙沼ニッティングの手編みのセーターについて、雑誌の読み物のようなビジュアルの、ストーリーが現れます。
じっくり読みたい人はここを開いて読む、そうでない人はスクロールをしなくてもすぐに次の目次を見ることができる。
機能的なデザインです。

横書きのテキストが多い中、縦書きの目次が目を引きます。

この縦書きでデザインされた目次も、本の目次のようで、サイト全体の読み物らしい雰囲気を演出しています。

そして、どのページも一段のレイアウトで、読み手の集中力を邪魔する余計なメニューやバナーがサイドにありません。

「気仙沼という町」という紹介ページは、背景に電車から見える気仙沼の景色の動画に縦書きのタイトルがのっていて、ページ全体が、まるで動く文庫本のようなデザインになっており、その世界観に読み手を引き込みます。

「これまでの物語」では、これまで起きたことやエピソードがそれぞれノートのようにまとめられており、タブのタイトルデザインがシンプルでありつつ鮮やかな色でアクセントとなり、それぞれのまとまりを差別化しています。

記事の区切りも罫線や囲いなどを使わずに余白とタイトルの色とで区切っており、目線を写真と文章とに集中させるため、できる限り装飾の要素を削ぎ落としてデザインされています。
その上で、要素は削ぎ落としながら、クリッカブルな部分は下線や囲みボタンできちんと認識できる作りです。

各ページごとに、丁寧に物語を読んでもらおうとする作り手の想いが感じられ、
その丁寧さ、誠実さが、全体のブランドイメージに通じていると思います。

主役である商品の紹介ページは、シンプルながら動きのあるセーターの写真で目を引きます。
ストレートな写真からは最高のモノであるという自信や誇りが感じられ、ブランドの価値を高めている印象です。
セーターの色味を引き立たせるため、商品ページの文字は全てモノクロ。
その中で縦書きのキャッチコピーは他の情報と区別され、読ませるレイアウトになっています。
商品の説明部分は文字が多く感じられますが、短く改行されており、行間も取ってあるので
絵本の文章のようなデザインでスムーズに言葉が入ってきます。

全体を通して、まさに手編みのセーターのように丁寧に構成されているデザインがとても美しいと思います。
無駄なものを削ぎ落として、心地よい余白の中に綴られる文字と写真。
ブランドにまつわるストーリーを大切に伝えたいという想いが伝わるデザインです。