NATURE.

Web Design

Date : Jan 2015

Client : Takumi Kai

CONCEPT

ヴィジュアルと中身で"自分"を伝えるポートフォリオサイト

サイトのビジュアルコンセプト

■目的と伝え方

サイトの目的は自分自身を発信する場所にすること。 どのように自分を知ってもらうかを考えたときに、3つの切り口で伝えようと考えました。その3つは以下の項目です。

1:「自己の根底にある価値観
2:「できること」
3:「考えていること」

根底にある価値観はビジュアルコンセプトで伝え、できることはWORKで、考えはJOURNALのコンテンツで伝えることを考えました。 この3つの切り口にしたのは、まずアウトプットとして出す「表現」と「思考」を伝えることが自分を伝えるに必要だと考え、さらにそのアウトプットがどこから出てきているのか、根底を作っているものをサイト全体のビジュアルコンセプトとして伝えようと考えました。

■ キービジュアル

サイトのキービジュアルは「波」です。 サイト全体で波の”線”、波で揺れる”水面のテクスチャ”、波の”水色”を使っています。 キービジュアルで伝えたいことは「根底にある価値観を表現する」こと。

自分にとってそれは、「本質」を求めること。自分にとって本質を考えたときに出てきたのが故郷の海に揺れる「波」でした。 人が美しいと感じるものは”自然”そのものであったり、自然原則を利用して作られているものだったりします。また、”本質”を求め考えることがものが溢れている今の社会に必要なものづくりをすることに欠かせないと思っています。 そのため”自然”と”本質”というのはかなり近い関係にあり、自分にとって美を感じ、大切にしたい本質の象徴として「波」を採用しサイト内で使用しています。

■ ロゴ

“NATURE.”のロゴは「太陽」と「波」で「日の出 sunrize」を表現しています。日の出には前進の意味を込めています。 「太陽」と「波」はそれぞれ”NATURE.”の”.[dot]“と”N”を使用し、以下のような意味を持たせました。

“.[dot]” = 点の集積 = 太陽
“N” = 波 = 水平線の波

ロゴでもキービジュアルと同じく「根底にある価値観」を表現することをテーマにしており 同じ「波」をテーマにしてロゴマークを作成しました。

本質を追求することで、それを「点」にして残すこと、点が積もり積もって太陽になるというイメージが着想にあります。日の出には希望という前向きな意味を込めました。

サイトの構造設計

■ トップの設計

トップでは3つに分けた切り口を順番に見せようと考えました。 サイトを人に見立てて、「第1印象→中身」の順番で自分自身を伝えていく流れを取りました。

サイトのトップに来た人には具体的なアウトプットからではなく、抽象的なコンセプトから知ってもらうことで「こういう人なんだ」ということをまず知ってもらうよう設計しました。 また、これは、短い時間で印象を覚えてもらうことにもつながっています。 なんとなくの印象を知ってもらったあとは、具体的に何ができる人なのか知ってもらうために”WORK”と”JOURNAL”の順番でコンテンツを配置しました。 “WORK”が先に来ているのは、まずは直感的に「できること」を知ってもらうためです。

■ アウトプットを1番に見せるWork

個別のWORKのページでは、アウトプットをしっかり見せることを考え、ファーストビューで大きくアウトプットを表示するレイアウトにしています。 また、アウトプット自体をよりよく見てもらうため、ページ内に使われているカラーをアウトプットのテーマカラーにし、サイトの色を極力消しています。

■ コンテンツ第1でサイトの存在を印象付けるJournal

Journalでは、コンテンツを1番に見せながら、サイトを印象付けることを意識しました。
ファーストビューではアイキャッチ画像は背景に設定し、タイトルにすぐ目が行くようにレイアウトを設定しました。 自分のサイトを印象付けるために、コンセプトである「波線のアニメーション」をタイトルに付与しています。 また、読み終わりに自分のプロフィールを置くことで、「この人のサイトなんだ」ということを無意識的に知ってもらえるようにしました。

■ 小さな演出と目線の集中を生み出すアニメーション

サイト全体には、コンテンツが”ふわり”と現れたり、波が動くなど、アニメーションを用いました。 アニメーションを用いた理由は「閲覧を楽しくするため」と「目線の集中を生み出すため」です。


閲覧を楽しくするために、「おっ」と思う演出を実装し、コンテンツの出てくる順番を微妙に変更することで目線の集中を生み出そうと考えました。

自分自身を伝えるために具体的なコンテンツだけではなく、ビジュアルコンセプトを用いて伝えることに挑戦しました。 自分が大切にしているものってなんだっけ?と自己と向き合うことで、自分自身を立ち返られるサイトにもなったと思います。

Year : Jan 2015

What I Did : Web Design

SHARE THIS

OTHER WORKS