2024.01.222024.01.21

figmaでデザインを作成し、WordPressでサイト制作をしました。

今回対応させていただいたページです。

期間

2023年4月〜2023年5月

figmaで作成したデザインを元に、WordPressでサイト制作をしました。

使用スキル等

WordPressのページ作成では、ブロックエディターでブロックを使用して作成しました。
既存ブロックではデザイン通り作成ができないため、オリジナルブロックやブロックテンプレートを作成して、ページを完成させています。

アニメーションもブロック単位での実装と、ページに対して行いました。
問い合わせフォームは、ContactForm7を使用し、見た目はカスタマイズしています。

実装したアニメーションは動画からご確認ください。

下記はデザインデータと実際のページのスクショです。

デザインデータ（figma）

スクリーンショット（PC、SP）

※納品から数日経過していること、デザイン変更があったことからデザインデータと異なる部分があります。
※ブラウザのスクリーンショットの画像のため実際の表示と異なる部分があります。

※担当したサイトのURL（リンク）を記載させていただいていますが、納品時（当方で制作したもの）と異なる場合がございます。

特殊なデザインのページをWP上で作成する場合、多くのサイトではテンプレートファイルに直接HTMLを記述して作成するという方法が多く取られます。

PHPファイル内のHTMLを編集するスキルがあれば、後々の編集等も問題ないですが、
このようなページの作成方法では記事編集画面からテキスト、画像を変更することができません。

当方では、特殊なデザインのページでも、簡単で直感的に記事編集画面からテキストや画像が変更できるよう、ページ作成は記事編集画面から行うようにしています。
ブロックテンプレートの作成、オリジナルブロックの作成を行うことで記事編集画面での作成を実現しています。

現在は、オリジナルブロックの作成はコストがかかるため、ブロックテンプレートでの対応がほとんどです。

オリジナルブロック開発についてはこちら