前回の記事
今回はワイヤフレームを頼りに、Figmaでデザイン＆プロトタイプを作っていく制作過程です。
個人的にこのフェーズが最も苦労しました。
私はデザインセンスはそんなになので、他サイトをパクr参考にしつつ、作っていきました。
文章内容考案や写真選別も自分で行う必要があるので大変でした。
とはいえ自分で好き勝手作れるので結構楽しい作業でもあります。
近年はスマートフォンからのウェブサイト閲覧が主流なので、デザインはモバイル端末の幅から作成しました。
写真選別
料理の写真はフリー画像から探しました。
特に、O-DANという、複数のフリー画像サイトを横断して検索できるサイトからメインで探しました。
参考↓
オートレイアウト機能
FigmaでWebサイトやアプリをデザインしてくうえで、便利なのがオートレイアウト機能です。
オートレイアウト機能は、cssのflexboxをノーコードで作り上げていくイメージです。
最近ではflex: wrapやmin-widthも設定できるようになり、より便利になりました。
↓このように、ボタンクリックだけで簡単にflexレイアウトを実現できます。
コンポーネント機能
Figmaのコンポーネント機能は、デザインの再利用性を高めるために作成した部品のことです。
イメージとしてHTMLのインクルードが近いかと思います。
ページが大量によるサイトや複雑なアプリを製作する時は、同じ親元から呼び出すことで品質の担保ができます。
パーツを編集したいとなった場合も、親元コンポーネントのみを編集することで、子コンポーネントすべてに反映されます。
要素を選択し、画面中央上部のCreate Compornentボタンをクリックすれば、選択した要素がコンポーネント化されます。
参照元：Figma Tutorial: Components - The Basics
今回はトップページのみの制作なので、アコーディオンパネルやタブ切り替えなどの動的機能にのみコンポーネントを活用しました。
そしてこんな感じでデザインが出来上がりました
プロトタイプ
Figmaでは、ノーコードでプロトタイプを実装することができます。
リンクを共有すれば、Figmaに登録していない人でも簡単に閲覧できます。
もちろん限定公開にすることも可能です。アカウントさえ登録すれば、共同編集も可能です。
まあいろいろやろうとしたら課金が必要になってきますが・・・
紹介したオートレイアウトやコンポーネント機能を覚えれば、ディレクターやデザイナーでもプロトタイプをノーコードで制作＆クライアントに共有することができます。
今回Figmaで作成したプロトタイプ
次回は、figmaで作成したデザインをReactで作っていきます。
次の記事↓