FigmaでHP・LPのデザインを作ったあと、どうやって公開する？

Figmaを使って、ホームページやLPのデザインを作る方も増えています。

画面上ではきれいに完成して、

「よし、デザインできた！」

となったあと、

「……これ、どうやってWebページにするの？」

と困ることはありませんか？

実は、Figmaで作ったデザインは、

そのままではホームページやLPとして公開されません。

今回は、Figmaで作ったデザインを

実際のWebページとして公開するまでの流れを、

できるだけ分かりやすくご紹介します。

Figmaで完成したものは「Webページのデザイン」

Figmaで作成したデザインは、

・文字の大きさや配置

・写真や画像

・ボタンのデザイン

・色や余白

・ページ全体のレイアウト

などを決めた、いわばWebページの完成イメージです。

見た目はホームページそのものでも、

この段階ではまだ実際のWebページとして動いているわけではありません。

URLを開いて誰でも見られる状態にするためには、

次の工程が必要になります。

デザインをもとに「コーディング」する

完成したデザインを実際のWebページとして表示できるようにする作業が、

コーディングです。

HTMLやCSSなどを使いながら、

「この文字はここ」

「この画像はこの大きさ」

「このボタンを押したらこのページへ」

と、デザインを実際のWebページとして組み立てていきます。

私はWordPressで制作する場合、

WordPressの中でデザインを確認しながら

HTML・CSSなどを使って実装しています。

そのため、

Figmaでデザイン完成

↓

WordPressでコーディング・実装

↓

Webページとして公開

という流れになります。

PC版のデザインしかなくても大丈夫？

「FigmaにはPC版しか作っていない」

「スマホ版までデザインを作らないと依頼できない？」

というご相談もあります。

PC・スマホ、どちらか一方のデザインしかない場合でも対応可能です。

支給されていない画面サイズについては、

元のデザインの雰囲気をできるだけ保ちながら、

スマートフォン・タブレット・PCそれぞれで見やすいように調整します。

これをレスポンシブ対応といいます。

ボタンやお問い合わせフォームも使えるように

Webページにすることで、デザインを見るだけではなく、

・ボタンを押して別ページへ移動する

・LINEやSNSへ移動する

・お問い合わせフォームから送信する

・FAQをクリックして開閉する

・YouTubeやGoogleマップを表示する

といった機能も付けられます。

デザインの中にボタンが描かれているだけでは実際には動かないので、

こうした部分もWebページ上で使えるように設定していきます。

Figmaのデザインが完成していれば「実装だけ」の依頼もできます

「デザインは自分で作れるから、コーディングだけお願いしたい」

「クライアント用のデザインは完成したけれど、

実装をお願いできる人を探している」

そんな場合は、デザイン制作から依頼する必要はありません。

完成したFigmaデータをご支給いただき、

デザインをもとにWordPressで実装することもできます。

Figma以外にも、XD・Photoshop・Illustrator・PDF・画像など、さまざまな形式の完成デザインから対応可能です。

このデザイン、実装できる？」という段階でも大丈夫です

デザインが完成していても、

「この動きは再現できる？」

「PC版しかないけど大丈夫？」

「お問い合わせフォームも付けられる？」

「どこまで基本料金に入る？」

など、分からないこともあると思います。

そんな場合は、まずデザインを見せていただければ、

実装方法や必要な内容を確認できます。

Figmaでデザインは完成した。

でも、そのあとどうやってWebページにすればいいのか分からない。

そんなときは、コーディング・WordPress実装の部分だけお任せいただくこともできます。

完成したデザインを、実際に見てもらえる・押せる・使えるWebページへ。

「このデザインでも大丈夫かな？」という段階でも、

お気軽にご相談ください。

▼ すでにデザイン・画像・PDFなどをお持ちの方

お持ちのデザインをもとに、実際に使えるWebページとして制作できます。

→「画像からWebページ化」のサービスはこちら

▼ 完成したデザインをコーディングしてほしい方

デザインは完成済みで、実装だけお願いしたい方はこちら。

→ WordPressでHP・LPをコーディングします。

▼ デザインからLP制作をお願いしたい方

更新できるWordPress LPとして、デザインから制作しています。

→「更新できるWordPress LP制作」のサービスはこちら

どの商品が合うかわからない場合も、お気軽にご相談ください😊

ご希望や現在の状況をお聞きしながら、一緒に考えさせていただきます。