ポートフォリオの目的である「お問い合わせ」
必ずフォームを用意しておいてください。こちらはお問い合わせしやすいようにページの一番下に用意すると良いでしょう。
本来は緊急性や限定性を持たせるとコンバージョン率が上がります。 例えば「9/30まで限定10名、写真撮影無料」などです。 ただ商品を売るページBtoCとは若干違い、このサイトはBtoBになりますので、この限定性はそこまで必要ないかもしれません。 でも試しに入れてみると良いですね、急いでいるクライアントには有効になる可能性もありますので。
実演：フォームのデザイン変更
元のコードのフォームがこちら↓
背景画像のミスマッチ感がありますね。 元々使っていた「ico-circle」クラスを無くし２タイプに分けたので、アイコン部分も上手く表示されていません。
まずはこの２か所を直しましょう。
SNSアイコン部分はプロフィール欄で使ったものをコピペします。 ヒーローエリアと同じようにCSSで背景画像を入れ、統一感を持たせました。
ボタンもBootstrapカラーなので、アクセントカラーに変更。 右側のエリアをオリジナル文言に変更し、フッターの色を合わせました。
あとは、以下のような調整を進めれば、オリジナルのポートフォリオが完成します。
- ナビゲーションの項目名を合わせる
- スマホ幅向けに調整する
課題1：フォーム周りの修正
現在課題で作成したフォームはダミーテキストなのでこれを日本語にしましょう。 背景画像、配色もデザインに合うように変更してください。
課題2：WP化・公開
オリジナルデザインのhtmlサイトが完成したら、WordPressテーマにしましょう。 ドメイン/レンタルサーバーを契約済の方は、本番環境へのアップロードも行ってテーマを切り替えてください。
講座のようにBootstrapを使用して作ったポートフォリオ課題（WordPressテーマ）とほぼ同じ場合は、フォルダごとコピーしてテキスト部分やstyle.css等の変更箇所だけを修正すると簡単にできますよ。
ブログを書いて運用していける形になったら完成です。