フリーランスになって10カ月目。ポートフォリオサイトを一からリニューアルしました。
この記事では、フリーランスデザイナーになりたての僕が、
どういうこだわりを持って自分のポートフォリオサイトを作ったかをご説明したいと思います。
こちらが『スウィフトデザイン』
ポートフォリオサイトです。
ぜひチェックしてみてください。
制作内容
フリーランスデザイナーにとって、ポートフォリオサイトは非常に重要だと思っています。
以下が大まかな流れです。
- 設計・構成
- デザイン
- コーディング・WordPress化
- ブログサイト制作
上記の通り、設計・構成、デザインからコーディング、WordPress化に至るまで全て自分で制作しました。
そして今回は、制作実績とブログ記事を別のWordPressテーマにしました。
それはなぜかというと、フットワーク軽く実績記事やデザインの発信をしていきたいと思ったからです。実を言うと、こちらのブログサイト構築の方が気合が入っていたかもしれません…！
ご覧いただいているこのブログサイトのことです♪
デザインのこだわり
デザイン全体
今回ポートフォリオサイトということで、
コンテンツとしては今までやってきた制作実績をまとめてアピールすることが大事ですよね。
しかし僕はWEBデザイナーであり、グラフィックデザイナーでもあるので、
このポートフォリオサイト自体がアピールになります。
だからまずは、ロゴデザインを作りたい！と思っていました。
ロゴデザインが好きなんです笑
とはいえロゴが先にあった方がWEBサイトは、取り組みやすい！これは間違いないです。
そして白黒基調で、すっきり無駄の少ないデザインで。
ロゴデザインについて
さて何をロゴにするか、文言を決めないといけません。そこからです。
今回の場合は、ポートフォリオサイト名になります。
「〇〇デザイン」にしたいというのは、何となく思っていました。
そこからですね、皆さま、今や生活になくてはならない必須ツール…ChatGPTの出番です。
僕は、2カ月前くらいから有料のChat GPT Plusにして仕事でもプライベートでも毎日使い倒しています。そんなチャップ君と毎日信頼関係を築いてきているので、今回もがっつり相談してポートフォリオサイト名を決めました。
『Swift Design』に決定です♪
Swiftとは「アマツバメ」のことです。
なんと一生のほとんどを、地上に降りることなく死ぬまで空を飛び続けているツバメだそうです。
デザイナーって、少なからず四六時中デザインのこと考えています。
ほんとです笑
特にデザイナーになりたての当初は、うまくいかないことだらけで、会社勤めなら尚更仕事が終わらない。家に帰ってからもデザインのことを考え、試行錯誤していた時期がありました。
そんな自分に重なる想いが生まれまして、こいつ（アマツバメ）だ！ってなりました笑
このロゴデザインの詳細については以下の記事で詳しく解説しています！
トップページ
ロゴが決まったら、いよいよポートフォリオサイト制作に着手です。
『Swift Design』というタイトルで、アマツバメが自由に空を飛ぶイメージがありました。
僕はいま東南アジアのマレーシアにて生活中なので、
自由に場所を選ばず海外にも飛んで伸び伸びと仕事してます！
ってことも伝えたかったので、今いるマレーシアでの風景も絡めたいと考えたんです。
トップビジュアルの空の動画
これは何と、僕の部屋の窓から見える景色です。
三脚にミラーレスカメラを固定して、日の出から日の入りまでインターバル撮影しました。
一定の間隔で自動的に複数枚の写真を連続で撮影する機能です。タイムラプス動画の作成によく利用されます。
ということで、マレーシアの日の出【午前6:45頃】から日の入り【午後7:45頃】まで、
12秒おきに写真を撮り続けて約13時間かかりました…
総写真枚数、4,000枚です笑
これね、1日で一発で撮れたわけではなく3日かかりました。
1日目はテストですね、数時間だけ撮って、白飛びとか色味を確認しました。
カメラ設定調整し直して、2日目に本番のつもりだったんですが、45分ほど朝寝過ごしてしまって、、
夜が明けて空がすでに明るくなってきてたので、「ん〜中途半端…」と思い断念。
そして3日目に一日撮り切ったわけです。
撮った4,000枚の写真をPCに取り込みました。
写真はLAWで撮っていたので、まずそれをAdobe Lightroomで軽く補正した後JPEGに変換。
次にSONYから出てる無料ソフトImaging Edgeを使用してタイムラプス動画として繋ぎ合わせると、1分7秒の動画になりました。さらにまた、Adobe Premiere Proで編集して動画の長さを56秒にしました。
なかなかこだわってるでしょう笑
その他の写真
プールの写真は、僕が賃貸しているコンドミニアムにあるプール。
すごく気持ちいいロケーションです♪マイギアのカメラとMacBook Proも散らし、住宅街の写真も僕の部屋の窓から見える景色です。
Aboutページ
この見出しの写真についても説明させてください。
またまた僕の部屋の窓から見える景色です笑
上を見ると、トップページのタイムラプス動画にした空なんですが、下に広がっているのは広大な空き地で、そこをカメラで狙いました。
200mmの望遠レンズを使用してインターバル撮影設定にしたあと空き地に行ってポーズを取ったわけです。カメラから何百メートルも離れている場所なので、もちろんシャッター音は聞こえません笑
12秒置きにシャッターが切れる設定なので、テキトーに体を停止してポーズを取りました。
Serviceページ
サービスメニューは、WEB・ロゴ・広告系・撮影制作の４つに分けました。
各見出しの写真イメージはスライドショーにして（Slickを使用）ブログサイトの制作実績ページへ飛べるようにもしています。
制作期間の目安と、制作料金の目安も乗せておきました。
あくまで目安なので、基本的にはメッセージにてご相談いただきたいと思っています。
制作実績＆ブログページ
こちら制作実績とブログについては、WordPressテーマ「SWELL」を使用したブログサイトの方で公開することにしました。
なぜかというと、サイトリニューアルをきっかけにブログ投稿にも力を入れてどんどん発信したいと思っていたからです。
WordPress有料テーマ「SWELL」は非常に使い勝手が良く、案件でも使用しているので安心して運用できます。SWELLについての記事も以下で解説しています！
Contactページ
お問い合わせはシンプルな項目でお問い合わせフォームを設置しました。
見出しの写真（Macbook）をあり合わせなものにしてしまってるので、もうちょっと工夫したいですね…今後差し替えたいと思います。
お問い合わせフォーム送信後のサンクスページも用意しています。
こういうひと手間は必要だと思います、案件でも必ずご要望に合わせて作ります。
コーディングについて
デザインがまとまったら次はコーディングです。
流れとしては、こんな感じ。
- html/sass/静的コーディング（ローカル環境）
- WordPress/php/動的コーディング（ローカル環境）
- 契約サーバーへアップ（本番環境）
ポートフォリオサイトのコーディング
ポートフォリオサイトのコーディングは、WordPressテーマは使用していません。
静的にコーディングしたhtmlファイルを、後からWordPress用にphpファイルに修正します。
見た目の状態や動作はローカルで作ったWordPress内で確認します。
WordPressのローカル環境を作るなら「Local」がオススメ♪
ブログサイトのコーディング
制作実績とブログは、WordPressテーマ「SWELL」を使用しています。
これもローカル環境のWordPressで作って、後から本番環境へアップするんですが、
最低限必要なレイアウトなどは整えて、リンクやカテゴリーなどそういう紐付けしたい項目も決めておいてから、本番でまた再現します。
これは二度手間になってしまうところも多いので、プラグインのインストールや設定なども含めて。
だからもう正直な話、本番環境に早めにアップしてしまって、直接ネット上で確認しながら細かいところは詰めていってますね。
まとめ
フリーランスデザイナーにとって、ポートフォリオサイトは非常に大事です。
僕の場合は、業務委託契約などで企業さんとやり取りもするのですが、ポートフォリオサイトの印象が殆ど決めてとなっていると感じています。
今回のポートフォリオサイトはリニューアルしたところなので、まだ成果というか反応はこれからになりますが、サイト一回作ったらそれでおしまいではなく、どんどんブラッシュアップ、更新していくことが大事だと思っています！
ぜひ今回の記事、参考になればなと思います。
ご質問やDMなどもお気軽にどうぞ〜
