お題を投げてもらって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のフレームで進めてみる
ヘッダーの小項目とかをコンポーネントにするといいかな？
ひとまず、ワイヤーフレーム作ろう
自動レスポンシブ機能とかないのかな
/emoji/pencil.icon後で調べる
オブジェクトの幅や大きさに理由をもてない
なぜこのくらいの大きさなのか、とか
別ページでアイコンをひらけた
ここからコピーして使う、みたいなのがセオリーなのだろうか
/emoji/pencil.icon これも後で調べる
プレビューがなぜかその媒体の画面になる
Macが開いちゃうけど、画面で見ているようにしたい
【問題点】フレームを動かすとこの虫眼鏡も一緒にサイズが変わってしまう
絶対どこかで連動する設定がある
https://scrapbox.io/files/673e9ac2e78e824a7439d758.png
code:plain
1. 虫眼鏡アイコン自体の「制約（Constraints）」を確認する
虫眼鏡アイコンを選択します。
右側のプロパティパネルで「制約（Constraints）」セクションを探します。
現在「スケール（Scale）」になっている場合、親フレームのサイズに応じてアイコンが拡大・縮小されます。
設定を「左（Left）」「上（Top）」に変更して、アイコンの位置とサイズを固定してください。
先生に聞いたところ、これでいけた
ここは写真ですとか示す場合
コメントをつける感じか？
偶数だとのっぺりした感じがする
奇数だとかっちりした感じがする
本当にそうか？
ワイヤーフレームの段階でコンポーネントとか意識すべきか？
グループにして名前つけたりはしてみた
途中経過 1時間
https://scrapbox.io/files/673ea1fb1b4852724c3b21fd.png