お題を作ってもらって、figmaでデザインしてみる

chot.designの基本講座とFigmaの講座が終わった

アウトプットしなきゃと思ってやってみる

お題の項目はWebデザインプロセスBookに則り、ChatGPTに出してもらう

code:plain

C社（伝統工芸品メーカー）

1. 制作の目的・背景

若年層への認知拡大と、オンライン販売を強化したいです。

これまで卸販売が中心でしたが、ECサイトを立ち上げ、BtoCにシフトしたいと考えています。

2. ターゲット

国内外の20代～30代の富裕層および高品質志向の顧客

日本文化や伝統工芸に興味を持つ観光客

3. 事業内容

手作りの陶器、木工品、染物の製造・販売

工芸教室の運営

海外向け展示会の開催

4. Webサイトに期待する効果

オンラインストアでの売上増加

ブランドストーリーを通じたファンの獲得

海外マーケットへの進出基盤の構築

5. 事業の方針・長期分析（強み）

100年以上の歴史を持ち、地元職人の技術を継承しています。

素材や製法にこだわった商品が評価され、過去には国内外の賞を受賞しています。

6. デザインテイストのご希望

和の要素を取り入れたシンプルで高級感のあるデザイン。

自然素材の温もりが感じられる色合い（生成りや木目調）を基調としたいです。

写真を多用し、製品の質感や製作風景を伝える構成を希望します。

ではこれでHPのトップページ作成をやってみる。

思考の過程メモ

とりあえず類似サイト調べる

伝統工芸を扱っている日本のECサイトをたくさん教えて

そもそもECと通常のサイトで注意することの違いとかありそう

gensparkで聞いてみる

https://scrapbox.io/files/673d4d59c62e0da70f90c3b8.png

こうみると、たくさんブロックが並んでいるように見える

反復という意味では良さそうだけど、本にあるようなリズムをつけるにはどうすれば良いだろう。

figma触る時は、最初はフレームを使うはず

ワイヤーフレーム、デザインカンプの順に作ろう

必要なセクションをまず文章にするのが良さそう

デザインカンプの場合は「トンマナ」を考える

NEXT: 盛り込む項目決める

MacBook Air - 1のフレームで進めてみる

ヘッダーの小項目とかをコンポーネントにするといいかな？

ひとまず、ワイヤーフレーム作ろう

自動レスポンシブ機能とかないのかな

途中経過 1時間

https://scrapbox.io/files/673ea1fb1b4852724c3b21fd.png

デザインカンプを作る

まず何をすればいいか？

トンマナを決める？

どういう基準で色を選んで良いか、全然わからなかった

何%で何とかはあるが、そもそも選び方とか

完成したが、なんともいえないなぁ

https://scrapbox.io/files/6768df9f10403ff6012304af.png

気づき

【問題点】フレームを動かすとこの虫眼鏡も一緒にサイズが変わってしまう

絶対どこかで連動する設定がある

https://scrapbox.io/files/673e9ac2e78e824a7439d758.png

code:plain

1. 虫眼鏡アイコン自体の「制約（Constraints）」を確認する

虫眼鏡アイコンを選択します。

右側のプロパティパネルで「制約（Constraints）」セクションを探します。

現在「スケール（Scale）」になっている場合、親フレームのサイズに応じてアイコンが拡大・縮小されます。

設定を「左（Left）」「上（Top）」に変更して、アイコンの位置とサイズを固定してください。

GPT先生に聞いたところ、これでいけた

先に大きなセクション作ってから作業すると良さそう

最初にコンセプトを決めるとよかった

偶数だとのっぺりした感じがする

奇数だとかっちりした感じがする

本当にそうか？

疑問（レビューの時に聞きたい）

セクションとセクションの間のスペースも厳密に何ピクセルか考えるか

どのように考えるといいのか

例えば、間隔で開けてからその結果のピクセルで良いのか、nの倍数みたいにした方がいいのか

https://scrapbox.io/files/6743a1542fbedb0103b9741c.png

オブジェクトの幅や大きさに理由をもてない、普通はどうやる？

なぜこのくらいの大きさなのか、とか

プレビューがなぜかその媒体の画面になる

Macが開いちゃうけど、画面で見ているようにしたい

ここは写真ですとか示す場合

コメントをつける感じか？

ワイヤーフレームの段階でコンポーネントとか意識すべきか？

グループにして名前つけたりはしてみた

別ページのアイコンを使う時のセオリーが知りたい

ここからコピーして使う、みたいなのがセオリーなのだろうか

どのようにトンマナを決めているのか

セクションの切れ目がパッ切りしてしまうのはどうすれば良いか

そういうセオリーや使うといい素材がある？

木目を入れてみたが、まさに木目って感じで微妙

境目がきっぱりしすぎているというか

こういう場合は似たようなサイトを調べるのが良い？

サイト自体に木目を突っ込む訳ではないのかも

そもそも境界をどうデザインするかみたいな話がある

写真やベタ塗りの上に乗っける文字の色どうしよう

黒だとなんか表現できないダサさがある

見出しのあしらいとかはどう管理している？

そういうサイトやfigmaでの良い管理方法がある？

一番課題に感じたのは、これがやりたいできないって感じた時に、どういうプロセスで解決に至るかが不明瞭

参考サイト

スライダー