ポートフォリオサイトができるまで -セルフブランディングとSTUDIOでのサイト制作-
こんにちは。
デザイナーのくにかたゆうかです。
先日、ポートフォリオサイトを公開しました。
このnoteはそのメイキングです。
・セルフブランディング
・STUDIOでのサイト制作
・ポートフォリオの見せ方
3つのパートに分かれていますので、興味のある部分を読んでいただければと思います。
※この記事ではSTUDIOの基本的な操作方法については触れておりませんのでご注意ください。
1.セルフブランディング（自分のブランド化）について
まずはサイトのデザイン、ロゴ、コピーなどがなぜこのアウトプットになったか、の制作背景をお話しします。
今回のポートフォリオサイトの制作背景の前に、
1年ほど前に作った名刺とのBefore/Afterを載せます。
Beforeのほう、悪くない、悪くないんだけど。実際気に入ってないわけでもなかったし。
でもなんか迷ってるし、おしゃれっぽいという表層だけをなぞってて
気持ちとか考えの奥行きを感じない、印象に残らない曖昧なデザインになってるかな〜・・・（過去の自分に厳しめ）
今のデザインは、気に入ってるし自分らしさを感じてます。
ポートフォリオサイト制作にあたり、まずスタートは
・どんなデザインにするか？
・自分らしさをどう表現するか？
つまり自分のブランド化が大事かなと。
とはいえ自分自身を客観視することはなかなか難しいもの。
自分で考えることはもちろん、まわりの人（クリエイターかどうかを問わず）にも意見をもらって自分をくっきりさせる。核を見つける。
そうすることで曖昧さがなくなり、芯のあるデザインになったと思います。
1-1.デザイナーとして大切にしていること
まずは自分がデザイナーとして大切にしていることを考えましたが、
すぐにその答えは出ないので自分の好きなものについて考えてみました。
一例ですが私の大好きなファッションブランド、「haco!」。
なぜ好きなのか。なぜ心が動くのか。
＜ファッションブランド「haco!」について＞
通販なのに温かさ、人感を感じる。Web上でのおもてなしがうまい。
たとえばお洋服の商品画像に手書きの文字でおすすめポイントが書かれてたり、ブログで企画段階のスタッフのこだわりがわかったり、買ったお洋服が届くときには包装紙に丁寧に包んでくれていて、手書きのレターが添えてあったり。
そこで出てきたキーワードが「温度感」。「温度感」とは思いやり、つながりやストーリーといった目には見えない人の心を動かすもの。
デザインするとき、感動する、なんて大きいものでなくても、嬉しかったりテンションが上がったり、ポジティブな人の心の動きを意識して作ってるなと気づきました。
でもデザイナーになりたてのころはそんな考えはなかったので
ある程度年月が経たないと見えてこないのかななんて思います。
デザイナー5年めになりますが、やってきた仕事ひとつひとつを振り返ってやっと見えてきたことかなと。
以下、ロゴや色、フォントについて書きますが、すべての要素がこの「温度感」につながるよう組み立てました。
1-2.「温度感」につながるアウトプット
●屋号とコピーについて
t2h design
I create "tiny tiny happy" by design.
デザインの力で "ほんの小さな華やぎ" を。
先ほどの「デザイナーとして大切にしていること」をもとに考えました。
「温度感」「嬉しかったりテンションが上がったり、ポジティブな人の心の動き」を"tiny tiny happy"ということばで表現しました。
「タイニー・タイニー・ハッピー」ということばは、いちばん好きな小説のタイトルから取りました（飛鳥井千砂さん著）。
「happy」は直訳すると「幸せ」ですが、「華やぎ」ということばを選びました。
●色
淡い水色とピンク。これは好きな色を選びました。
濃い色と淡い色、わたしのイメージはどちらか、知り合いのデザイナーふたりに意見をもらいました。結構ビビッドな色が好きだったりするし、洋服も濃い色をよく着てるので、ふたりともに淡いイメージと言われたのはちょっと意外でした。
●ロゴ
[ シンボルマーク ]
コピーにある "華やぎ" と自身の名前に入っている1文字「花」を
t2h design＝tiny tiny happy design
それぞれの単語の頭文字で表現。
ちなみに、名前は漢字ではなくひらがなで表記。
わたしの名前は漢字で書くと堅い印象になってしまうので、柔らかさが伝わることを意図しています。
[ ロゴタイプ ]
tの縦線上部を斜めに、iのドットを崩した円にすることで、
手書きを連想する温度感を表現。
●パターン
サイトの背景に使用している水彩のパターン。
模様デザイナーmayaさんにお願いしました。
mayaさんの模様が大好きで、わたしのnoteのサムネは全部「みんなのフォトギャラリー」にあるmayaさん作のものを使っています。
3色のインクを使って描いていただいた水彩の模様は、シームレスなパターンでなく、「できあがるまでどんな模様になるかわからない」ということだったので、それが温度感があっていいなと思い依頼しました。
ベースカラーは水色。アクセントカラーのピンクで「華やぎ」を表現していいただきました。
素敵な仕上がりで、めちゃくちゃキュンとしました。
すべてを自分で作るのもいいですが、わたしはイラストが描けないので、こうして他のデザイナーさんにお願いするのもおすすめです。
●フォント
前提として欧文・日本語ともに、STUDIOで使えるGoogle fontsで、太さが2種類以上あるものを選びました。
欧文フォント：Quattrocento Sans
わたしらしいフォントについて、「細めサンセリフ」「サンセリフは芯のある感じが伝わる」と意見をもらったのがしっくりきたのでサンセリフ体の中から選びました。このフォントを選んだのは文字の中で線の太さが一定でなく、機械的ではない、温度感を感じたから。
イタリックにしたときに「a」の表情が変わるところがお気に入りです。
日本語フォント：Noto Sans JP
欧文フォントと親和性の高いゴシック体を選びました。
Noto Sansは汎用性の高いWebフォント。
●その他サイトでの表現
・固有名詞以外は全て単語は小文字で表現
（「tiny tiny happy＝ほんの小さな華やぎ」のイメージに合うように）
・キャッチコピーを手書きの文字で表現
2.STUDIOでのサイト制作について
サイトの構築はSTUDIOで行いました。
STUDIOとは、ノーコードでWebサイトを作成できるサービス。
STUDIOでデザインしたものは同時にコーディングもしてくれます。
コーディングに強くないデザイナーにもってこいのツール。
コードを書かなくていいテンプレやポートフォリオのプラットフォームは多々ありますがデザインの自由度は低いので、ポートフォリオサイトを作るならコーディングは別の方にお願いしないと、と思っていましたがSTUDIOが解決してくれました。
2-1.STUDIOを選んだ理由
STUDIOは数年前、出てきた頃から知っていて、気になっていて、でもいざ何かサイトをつくるということはこれまでしたことがなくて。
でも1ヶ月ほど前にSTUDIOで作ったという「OYOGE」のWebサイトを知りました。
素敵すぎてめちゃくちゃ衝撃でした。
えっこれノーコードでできるの！？アニメーションも？要素の固定も？フォームも？お知らせ（CMS）も？フォントも？まじで！？？？
これはもうほぼフルスクラッチやん。
それでSTUDIOについて知りたい、勉強したいと思ったのが始まりです。
ノーコードのツールでここまでの表現ができる、というのがSTUDIOを選んだ理由です。
2-2.STUDIOのメリット
●無料で使える
無料でサイト構築・公開できます。
（※独自ドメインでの公開は有料プランへの切り替えが必要）
●オリジナルのデザインができる
作ったデザインがそのままWebサイトに表現できます。テンプレは決まったレイアウトに合わせにかからないといけないので、あまり自由度が高いデザインはできないのですが、STUDIOならオリジナルのデザインが表現できます。
●コーディングができなくても感覚的に構築できる
STUDIOはコードを書くことは一切不要。STUDIO上でデザインしたものは同時進行で自動でコーディングをしてくれます。デザインをつくるだけでOK。
もちろん、ある程度のHTML/CSSの知識があったほうが理解は早いと思います。
●デザインしながら構築できる
ほぼ全てのページのデザインを制作→コーディングする
というのがWebサイト制作の一般的な流れですが、STUDIOではデザインしながらの構築が可能。実際わたしが今回デザインをXDで作ったのはTOPページのみ。デザインと構築が同時に行えるのは大幅な時間短縮になります。
●わからないことがあったらチャットで問い合わせできる
デザインのこと、公開のことなどわからないことがあればチャットで問い合わせができます。何度か問い合わせたのですが、回答までに時間はある程度かかるものの、丁寧に対応いただけました。
2-3.STUDIOのデメリット
●ボックスレイアウト
コツがいるので理解したり慣れるまでに時間がかかります。
●各ページごとに調整が必要
モーションやhover、マージンなど、コーディングなら1行CSSを変更したら済むものも、各ページで調整が必要となります。（※静的ページの場合）
全ページ作り終わった後に、「やっぱり日本語フォント全部変えたい」とかなったら結構大変です。
グローバルナビゲーションやフッターなど、各ページの共通パーツはシンボル化するのがおすすめです。
●複雑な表現が難しい
STUDIOに搭載されている機能を使っての表現になるので、機能面やデザイン面にある程度の制約があります。
とはいえ、よっぽど複雑なアニメーションなどでない限りそこまで困ることはないんじゃないかなというのが使ってみての実感です。
2-4.どうやってSTUDIOを学んだか
●動画を見る
STUDIOの公式YouTubeでサイト制作のチュートリアル動画がたくさんあがっています。基本的なところを一通り見て、できることを知ってからデザインを考えました。人によるとは思いますが、機能ややり方を知っている状態で触り始めたので、何も知らずにいきなり触っていくより効率的に構築できたと思います。
●STUDIOでサイト制作をした記事を読む
STUDIOでサイト制作した事例の記事は結構あります。
STUDIOで作ったサイトを見て、そのプロセスを知ると「あ、なんかわたしにもできるかも！」と思えます。
特にCMSを使っての構築は最初難しくて、記事を読みつつ理解しました。
（※CMSの記事については後述します）
●STUDIOに用意されているテンプレートを見る
STUDIOにはテンプレートが用意されています。
それを自身のSTUDIOにプロジェクトとして追加し、編集することが可能です。モーションのつけ方やCMSでの表現など、「こうやってるのか！」を学べます。
2-5.STUDIOでのサイト構築
STUDIOでのサイト構築の手順・ポイントについてお話しします。
●サイトの構成、サイトマップをつくる
POINT：CMSを使うところを最初に決めておく
まずはサイトマップをつくり、全体像を把握。
それぞれのページで、CMSを使って構築する箇所を最初に決めておきます。
CMSを使う箇所はSTUDIO上での構築のやり方が静的ページと違うので、二度手間になってしまわないようにするため（※CMSについては後述します）。
●STUDIOでデザインを実装
XDやPhotoshopなどでつくったデザインを実装していきます。
POINT：デザインはPC（基準）から
STUDIOはレスポンシブ対応しています。
なので、PC・タブレット・モバイルそれぞれデザインを最適化できます。
PCでのデザイン：タブレット、モバイルに引き継がれる
タブレットのデザイン：モバイルに引き継がれる
なので、PCをまずは作成し、後からタブレット・モバイルを調整するとよいです。
タブレット用の編集画面で実装したものはPCのデザインには反映されません。二度手間になってしまうのでデザインはPCからで。
タブレット・モバイルのレスポンシブ調整は、気になりだしたらわりと沼です。今までタブレット・モバイルのデザイン、全てはつくらず「あとはいい感じにお願いします」ってコーダーさんにお任せすることが多かったので、こんな調整をしてくれてたんですね・・・ありがとうございます！！！という気持ちになりました。
●CMSについて
STUDIOはCMSにも対応しています。ポートフォリオは定期的に更新する類のもの。毎回静的ページを編集するのは大変なので、CMSを使わない手はないと思います。
制作したポートフォリオサイトは、
・works
・works-category(graphic design/web design)
のページ（実績の一覧ページ）はCMSを使っています。
実績の詳細ページもCMSを使って管理するのもありだと思います。
TOPページに表示させる実績もCMS内の「コレクション」を使って実装すると管理しやすいと思います。
STUDIOでのCMSはモデルのタイプを追加し、時には組みわせて構築します。
今回追加したカスタムタイプのモデルは記事タイプとは違い、順番を自由に入れ替えられるので、作品が管理しやすいです。
モデルタイプ：カスタムタイプ
追加したプロパティ：
カテゴリ（works category）/ URL / caption / メイン画像
CMSで実装したページのビジュアルとSTUDIOのCMSの設定画面がこちら。
❶カテゴリー（web/design）
カテゴリータイプのモデル。
登録しておくことでカテゴリー別に自動で表示される
❷URL
works詳細ページへのURLの、xxxxの部分を登録
https://t2hdesign.com/work/xxxx
❸caption
❹メイン画像
実際登録している値
画像左：❶web design ❷utamaro ❸official site ❹ページに表示したい画像
画像右：❶web design ❷mouriya ❸brand site ❹ページに表示したい画像
CMS、わたし的に最大の難関でした。静的ページを実装するのとは構造が違うので、理解するのにいちばん時間がかかりました。
一番参考になったのがこちらの記事。
三浦えりさんのポートフォリオサイトの制作プロセスが書かれた記事。このサイトはSTUDIOのテンプレートの中にあるので、プロジェクトとして追加することで、CMSの構造を知ることができます。
●ディレクトリ管理について
ポートフォリオサイトを作ってる途中、タイムリーにSTUDIOのディレクトリ管理機能がリリースされました。
実績の詳細ページを「/work/xxxx」と/work以下にまとめることができて管理しやすくなりました。
●hover、モーションについて
ページができたらhover、モーション（アニメーション）をつけます。
hover、モーションはPC・タブレット・モバイルそれぞれ個別に設定できます。hoverはタブレット・モバイルでは基本的には非アクティブに。
●フォームについて
STUDIOではデザインと通知先のメールアドレスの設定をするだけでフォームを使えるようになります。
フォームを設置するなら、プライバシーポリシーのページは必須です。
●公開前に設定すること
・ファビコン
サイズは32×32が推奨されていますが、ここで登録したものがapple-touch-icon（Webサイトをスマホのホーム画面に追加した時に表示される画像）にもなるので、「180×180」で作成。
・OGP画像
・titleとdescription
この3点はSTUDIOではサイト全体で設定も、ページごとに設定も可能です。
●独自ドメインでの公開
STUDIOで作成したサイトは基本的に無料で公開できます。
また、有料プランに切り替えることで、独自ドメインでの公開が可能です。
独自ドメインはお名前.comで取得しました。
独自ドメインでの公開について参考になった記事はこちら。
●公開後設定すること
・Google Analytics
・Google Search Console
3.作品の見せ方で気をつけたこと
●実績のボリューム
TOPページにはいちばん見て欲しい6つの実績を掲載。
TOPページからたくさんの数を掲載しても全部はみてもらえないだろうから、入り口としての自分のイチオシの6つ。
webデザインとグラフィックデザインの数が均等になる見せ方をしました。
●実績の一覧ページ（https://t2hdesign.com/works）
・サムネイル
一覧ページに表示させるサムネイルはモックアップを使用して作成しています。サイズ・背景色を合わせて統一感を出しました。
サイズは黄金比で作成。
わたしはデザインの際、長方形を使うときは黄金比・白銀比などをよく使いますが、スマホでページが長くなることを回避するため黄金比にしました。
・カテゴリについて
web design/graphic designのふたつにとどめ、カテゴリを細分化しすぎないようにしました。
これは実績の数や作品によって変わってくるかと思います。
●実績の詳細ページ（例：https://t2hdesign.com/work/utamaro）
実績の詳細ページではクライアントらしさを、
それ以外のページでは自分らしさを。
実績の詳細ページはクライアントごとに作成しました。
実績の詳細ページではそれ以外のページで固定している背景のパターンを削除、頭のタイトル部分はクライアントのコーポレートカラーをそれぞれ使用し、クライアントらしさが伝わる表現にしました。
*********
お読みくださりありがとうございます。
自分らしさを考えること、ツールでデザインしたり実装すること。
圧倒的に前者が大切で、時間を使うべきで、深く考えるべきで。
そうすることで納得のできるしっくりくる自分らしいデザインができるのかなと感じました。
たくさんの方に「くにかたさんらしい」と言っていただけたことがとても嬉しかったです。
あくまでわたしの事例ですが、ポートフォリオサイト制作の参考になりましたら嬉しいです。
この記事が気に入ったらサポートをしてみませんか？