フリーランスになっても、未だに制作してなかった自分のホームページ（ポートフォリオサイト）。
以前から、自分のサービスや料金がしっかり掲載されたホームページを作りたいとはずっと思っていました。
ただ時間かかるし、自分のサイトって自由だからこそめっちゃ悩む…！
私の場合、ブログ・インスタがポートフォリオの役割を果たしていて（★）早急に必要というわけでもなく仕事も忙しかったので、ずっと後回しにしてきました。
★について、詳しくは下記の記事に書いています。
現在フリーランス5年目になりだいぶ余裕ができてきたので、ようやく重い腰を上げて制作に取り掛かろうかと思います！
夏公開を目指していましたが、ちょっと延びて…目指せ秋公開！
この記事では、フリーランスWebデザイナーのポートフォリオサイト制作のプロセスをリアルに公開します。
現在まだ途中ですが、工程が進むごとに追記してポートフォリオが完成するとこの記事も完成します！
実際の制作工程を発信することで、ホームページ制作の具体的な作業が伝わり、Webデザイナーや目指す方の参考になればいいなと思います♩
ポートフォリオの重要性・載せるべき項目・作り方は下記の記事で詳しく説明しています！
- 歴14年のWebデザイナー
- 10年間Web制作会社に勤務 → 独立
- フリーランス5年目
- デザイナーの採用担当してました！
- 娘6歳・息子1歳のワーママ
- 地域情報ブログ「福知Navi」運営
使用ツールと準備するもの
私がポートフォリオ制作に使うツール・準備したものは下記の通り。
- デザインツール：Photoshop
- コーディングツール：WordPress
- サーバー：エックスサーバー
- ドメイン：cotonoha-design.com
デザインはPhotoshopで作っていきます。
コーディングはWordPressで行う予定。
テーマは元々使っていたテーマ（Snow Monkey）から変更して「JIN:R」で制作することにしました。
ホームページ制作におすすめのWordPressテーマは下記の記事で紹介！
JIN:Rに変更した理由も記載しています。
サーバーはエックスサーバーで！長年愛用しているサーバーです。
ドメインはフリーランスになった際にエックスサーバードメインで取得していました。
今まではこのブログとメールアドレスに使っていましたが、ようやく本ドメインを使う時が来ました…！
私は以前から持っていましたが、これからエックスサーバーを申し込む場合は、サーバー・ドメインを同時取得して、更に同時にWordPressもインストールすることができます。
大体キャンペーンを行ってるので、ドメイン代は永久無料の場合が多いです。詳しい手順は下記の記事で説明しています。すごく簡単なので是非ご活用くださいね。
ポートフォリオサイト制作のプロセス
下記のような流れで進めて行く予定です。
- デザインイメージを決める
- ページ構成を決める
- トップページ原稿制作
- トップページデザイン制作
- トップページコーディング
- 下層ページ原稿制作
- 下層ページデザイン制作
- 下層ページコーディング
- スマホサイト調整
- 最終チェック・調整
- 公開作業
下層ページ制作とトップコーディングは並行して行う予定です！
1つずつ詳細を書いていきます。
【1】デザインイメージを決める
以前より好きなデザインのサイトをPinterestに集めていて、どんなポートフォリオサイトにしようかな〜と考えていました。
集めたデザインテイストを改めて見るとどれも素敵ですが、やっぱり私はシンプルでわかりやすいデザインが好きだなぁと再認識。
フリーランスになった時に私の想いが詰まった素敵なロゴを作ってもらったので、そのロゴに合うような、シンプルでキレイなデザインにしようと決めました。
→ ロゴを作ってもらった時の記事
【2】ページ構成を決める
ページ構成を下記内容に決めました！
- ホーム
- 私のこと
- できることと料金
- 作ったもの（ブログへリンク）
- お問い合わせ
④はこのブログの制作実績カテゴリにリンクさせるので、実際に作るのは4ページ。
少ないですがひとまず最低限必要なページを作り、今後必要に応じて追加していこうと思います。
そうじゃないと一生公開できなさそうなので。。
お客様が一番知りたい情報は、サービス内容・料金・制作実績・どんな人なのか？ということなので、まずはそれがしっかりと記載されたサイトを作ろうと思います！
私の屋号「コトノハデザイン」は日本語（言の葉）に由来するので、ページ名はあえてわかりやすい日本語で♡
【3】トップページ原稿作成
- 私のこと（簡単に紹介して詳細ページへリンク）
- できること（簡単に紹介して詳細ページへリンク）
- 制作実績へのリンク
- お問い合わせへのリンク
- お知らせ
トップページでは、ページ構成の内容を簡単に紹介して詳細ページへリンクさせます。
あと長期休暇などの案内を書きたいので、お知らせをどこかに入れる予定です。
トップページの原稿で必要なのは②と③の内容で、ざっくりとテキストにまとめました。
→ こんな感じ。
※ デザイン制作の際に、内容や表現は変わる可能性があります。
あと原稿としては書いてませんが、一番上にはメイン画像がありコンセプトを載せた画像を配置する予定です。
私のコンセプトは「届けたい言葉をデザインする」です♡
【4】トップページデザイン制作
Photoshopでデザインを作っていきます。
シンプルでロゴに合うデザインで【今の自分の「好き」を詰め込んだデザイン】にしようと思ったものの、実際に形にするまでにはかなり悩みました。
シンプルにも色々な形があるのでね～。
そんな中、デザインの方向性を決めたのは過去に担当した仕事でした。
私は定期的に発行されている福知山のフリーペーパー「Fukuchiyama Magazine」のデザイン制作を担当しているのですが、このデザインの空気感がすごく好きで。
＼ こんなデザインです ／
自画自賛的な感じになっちゃいますが笑
お気に入りのデザインです♡
このフリーペーパーを作るにあたり、参考としてシンプルでエモくて余白を大事にした冊子のデザインをたくさん見たんですが、どれも大好き！
こんな空気感のあるデザインにしよう！と決めました。
そして実際に作ったデザインは下記のような感じです。
デザインのこだわりはまた完成してからじっくりと書くとして。
ここからは一旦コーディングです！
ある程度コーディングのことは考えてレイアウトしましたが、一部は「たぶんできるやろ」的な感じで作ったところもあり笑
コーディング時に難しかったり、実際にブラウザで見て変えた方がいいなと思ったところは、少しデザイン変更もしながら組んでいきます。
【5】トップページコーディング
コーディング方法は色々ありますが、WordPressの既存テーマをカスタマイズするという方法でコーディングを行います。
▼ コーディング方法まとめました。
WordPressでJIN:Rというテーマをカスタマイズして、ほぼデザイン通りにコーディングができました！
デザイン案から少し変更した箇所・追加した箇所等ありますが、ほぼデザイン通りに組めました♡
トップコーディングができれば下層コーディングはそこまで難しくないので、安心して下層制作に取り掛かっていけます。
下層ページ原稿制作
coming soon…
下層ページデザイン制作
coming soon…
coming soon…
下層ページコーディング
coming soon…
最終調整
coming soon…
公開作業
coming soon…
まとめ
記事が完成したら書きます♩
