Webデザイン

こんにちは、noteというプロダクトでデザイナーをしている沢登です。 詳細な自己紹介はこちらへ（https://note.swn.jp/n/naf4727f70a56）

今回は3年ほど前に制作したポートフォリオサイトで考えていたことなどを、いろいろうろ覚えですが書いて行こうと思います。（ポートフォリオ https://swn.jp/ ） 本記事は、コンセプトをどう表現に落としたか・デザインの工夫などは書かれておらず、ざっくり大枠の流れを参考にしてもらい、「ちょっと自分でも作ってみようかな...」と思ってもらうことを目指した記事になります。

現在のポートフォリオは3代目ですが、過去制作したものも含めて「自己」と「挑戦」というコンセプトは共通して持っています。これらのコンセプトを持つ（持てる）プロジェクトや業務は普段存在しないはずです。なぜなら、デザインの主体は本来ユーザーやクライアントだから。

そんな普段業務では持つことないコンセプトをベースにポートフォリオ制作が始まっていきます。

自分のためのポートフォリオなので、まずは自分がデザインをする上での「らしさ」を定義しました。僕の場合、日頃から心がけているキーワードがあったので、解像度を上げる程度で時間をかけずにスパッと決めました。

design like water どんなに複雑な隙間でも満たすことができ、無味無臭で存在感を表さない。そんな水のようなデザイン。

この「らしさ」を元にサイト名を

SWAN (swn.jp) そんな水に浮かぶ、シンプルで言葉以上に品を感じるられる「白鳥」をモチーフに（ちなみに、苗字の抽出だったり、ドメインの都合など色々その他の理由も加わってます）

ここまでで「挑戦」「自己」「水」「白鳥」などのキーワードが出てきています。これらをどう料理していくか考えていきいくつかのアイデアを出した後、「普段業務ではできないような表現で、水に浮かぶ白鳥を表現しよう」と決めました。

やっとウェブデザインに入るわけですが、ただひたすらにラフ・プロトタイプを作ります。最終ジャッジは自分なので、まずは頭の中にあるものすべてを吐き出して具象化して次のアイデアへ発展させるヒントを炙り出します。

レイアウトパターン・ページ構成・トレンド・コンセプトの混ぜ具合・ラベリングなどなど、色々なパターンを可視化して自分の中で何を重視したいのか絞るための材料を作っているイメージです。

実際にテスト実装もしました（この時はjsで組んでしまいましたが、今はプロトタイピングツールも充実してますし、そちらのほうが早そうです）

また、当時このタイミングで転職活動も行なっており、専用のプロトも作成し実際それを持って面談で利用しました。主にコンテンツ周りで「らしさ」の説明が難しすぎないかの調査、引きのあるコンテンツ順序、知りたい情報の吸い上げ、などを目的として行いました。

面談時に得られた情報を元にコンテンツのアップデートを行っています。

と、色々な側面から制作を進めていくと、自身が決定者ということもあり迷うことが多くなって来ます。業務などでは解像度を上げるために一度立ち止まって話し合いをしたりしますが、今回は自身のものなので「自分が毎日触っていて、毎日訪れたくなる気持ち良さ、自分の所持欲を満たせているか」を判断基準として新たに設けました。（後付けで基準を足せるのも自分のプロジェクトならでは...）

プロトタイプの項にあった複雑で凝ったUIを全部捨て、トップページからの遷移をメインストリームとして定義し行動をシンプル化。もともとあったコンセプトは出来るだけ削ぎ落として、ポイントで表現する程度に。細かいイージングやタイミングや、所持してる感を増すためにPWA対応も行いました。 実際に毎日触り、気になる部分の洗い出しを行った結果、最終的に腹落ち70%くらいに届くようになりました。

僕のポートフォリオにはバージョン表記があり、公開した後でも未完成品であることを伝えています。リリースしたあとも毎日のように反復で触り、言葉遣い・パフォーマンスなどをチェックして、都度手を入れることで、継続的に改善を行う体制を持つようにしています。（現在はバージョン1.5まで進行中）

というような進め方でリリースされました。

ここまでのプロセス、おそらく実務ではほぼ使えないと思います。 リリース前に2−3週間触る時間を作るなんてのはなかなか難しいと思いますが、生かせることとしては「リリースしたタイミングが完成物ではない」ということではないでしょうか。 ウェブサイトでもアプリでも人が触ってからがスタートですし、人が触って初めて機能するものなので、自分を含めた最初に人が触るまでにかける時間をどこまで減らせるのかがコツかもしれません。

自分のポートフォリオ作りの醍醐味は、自分勝手に自己満足で作れる一方、コンセプトや通す筋がはっきりしていないと、発散しすぎて収束させるのが難しい案件ではありますが、業務で使わない意識を使えるのでおすすめです。

かなり駆け足でしたがお読みいただきありがとうございました。 細かい質問はTwitterのDMなどでもお答えできるのでお気軽にどうぞ。

こんにちは、noteというプロダクトでデザイナーをしている沢登です。詳細な自己紹介はこちらへ（https://note.swn.jp/n/naf4727f70a56）
今回は3年ほど前に制作したポートフ

デザインケース

デザインチーム

自分のためのポートフォリオサイトの作り方

自分のためのポートフォリオサイトの作り方

関わったメンバー

sawamemo

関連するカテゴリ