Key's Portfolio

制作実例をカスタム投稿とカスタムフィールドを使用して作成しており、追加されていく制作実績の更新をしやすくなっています。
トップページの背景にはドットを配置し、PC表示の際にはJavaScriptでスクロール量に応じて移動量を制御することで、パララックス効果を表現しています。
また、各セクションのビューポートへの侵入を検知し、対応するサイドメニュー要素に対して個別のスタイルを当てるよことで、プログレスバーのような効果を実現しました。
さらに、制作実例カードをクリックした際にモーダルウィンドウで詳細を表示したり、制作実例一覧ページでヘッダーメニューをクリックした際、トップページの該当要素へスムーススクロールするようにしています。ユーザーがページ遷移の際のストレスを意識することなくサイトを閲覧できるよう心がけました。

Webサービス風のLPのコーディングを行いました。
全体を通じて、アニメーションは付与せずシンプルな仕上がりにしました。
ボタンやリンクなどのマイクロインタラクションには、下記のようなついクリックしたくなる動きを取り入れました。
・メニューのテキストリンクはホバーした際にスタイリッシュな下線が表示されるようにしました。
・CTAボタンはホバーした際にふわっと浮かぶようなアニメーションを実装しました。
・料金表のCTAボタンはホバーした際に背景色を変化させ、また、背景に溶け込まないように背景色に合わせて枠線の色も変化させました。

表参道のカフェを意識した架空サイトのLPです。
全体的にのっぺりしたサイトであるため、おしゃれさと視覚的興味を引き出すよう、ふわっと表示されるアニメーションや、パララックス効果などの実装を組み込みました。
GoogleMapsの埋め込みはMaps JavaScript APIを使用しています。
店舗の位置がわかりやすいように、マップ全体はグレースケールで表示しピンにはオリジナルのロゴを使用しています。また、マップが表示される際にピンが上から降ってくるようなアニメーションを実装しました。

※お問い合わせフォームはバックエンドとの連携はなく、フロント部分だけ作成しております。
実際にLPなどのサイトに組み込む際は、WordPressのプラグインや外部サービスを用いて実装する形式となります。

【Basic認証がかかっています(ID:demo / PASS:demo)】
TOPページ＋下層10ページのコーディング、WordPress対応を行いました。
ヘッダーメニューでは表示しているページを文字色をテーマカラーに変更しています。
スタッフブログ、診療案内、スタッフ紹介ページをカスタム投稿とカスタムフィールドを使用して作成しており、クライアント様が日々のサイトの更新をしやすくなっています。
また、投稿日から3日以内の記事には「NEW」のバッチが付与されるようにしています。それによりサイトを訪れたユーザーへ新着記事の認知・閲覧を促しています。
Web予約フォームでは、当日以前の日付を入力できないようJavaScriptで制御し、ユーザビリティの向上に努めました。