お題を作ってもらって、figmaでデザインしてみる
https://scrapbox.io/files/67aabaaad43a600d5de473e6.png
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後で調べる
途中経過 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が開いちゃうけど、画面で見ているようにしたい
ここは写真ですとか示す場合
コメントをつける感じか？
ワイヤーフレームの段階でコンポーネントとか意識すべきか？
グループにして名前つけたりはしてみた
別ページのアイコンを使う時のセオリーが知りたい
ここからコピーして使う、みたいなのがセオリーなのだろうか
/emoji/pencil.icon これも後で調べる
どのようにトンマナを決めているのか
セクションの切れ目がパッ切りしてしまうのはどうすれば良いか
そういうセオリーや使うといい素材がある？
回答
色を薄くするなどで徐々に変える
木目を入れてみたが、まさに木目って感じで微妙
境目がきっぱりしすぎているというか
こういう場合は似たようなサイトを調べるのが良い？
サイト自体に木目を突っ込む訳ではないのかも
そもそも境界をどうデザインするかみたいな話がある
回答
色で区切った方が良さそうだった
写真やベタ塗りの上に乗っける文字の色どうしよう
黒だとなんか表現できないダサさがある
回答
あまり気にしなくて良さそう
写真に文字を入れる場合
何か一言、キャッチフレーズ的なもの
写真が主役かどうか、文字が主役かどうか
見出しのあしらいとかはどう管理している？
そういうサイトやfigmaでの良い管理方法がある？
一番課題に感じたのは、これがやりたいできないって感じた時に、どういうプロセスで解決に至るかが不明瞭
回答
お客さんがどうしたいのかを徹底的に考える
業務内容レベルで確認してイメージをわかせる
あとは、競合をとにかく調査する
少しずつイメージを固めていく感じ
こうすると響くというものを参考にする
得意不得意はある。女性のデザイナーさんが化粧品のデザインを考えられるなど
知らないものは徹底的に調べる
「どういうもの」「アングル」が良いのかなど
/icons/hr.icon
0211レビューの学び
https://scrapbox.io/files/67aabaaad43a600d5de473e6.png
コンセプトが特に重要
例えば、依頼があった際の目的
認知度向上
人を集客するとか
それによってどんなビジネスしているのか、ターゲットは誰なのかなどを絞る
LPはどうか？とか
あとは競合を見る（重要）
色味やテイスト
会社カラーではなく業界のカラー
特になく作りたい、とかであれば大手や有名なサイトを参考にするとかがある
ヒアリングをすることで、構成が決まる
そこからやっとワイヤーフレーム
特にトップの部分
一般的に、サイトの形は大まかに決まっていると思っていい
写真は特に重要
例）人の顔があれば文字ではなくそこに目がいくようなイメージ
ものを売る！という感じのサイトはトップにこんな感じに説明はこない
https://scrapbox.io/files/67aab5432df105447b4a7bc6.png
口コミ
真実性があるものを載せる。（実際のスクショなど）
あとは、口コミは長いので見出しをつける。
https://scrapbox.io/files/67aab66438c541dc2912e88c.png
背景に直接文字を入れること（重要）
「まとまり」で考える。口コミなら、写真とタイトルと文章をまとめて入れる的な感じ。
配色の考え方
競合や業界を調査して、そこから決めていく
ホームページのボリュームの話
情報がないサイトなら、1枚ものでも全然良い
写真
やりたいことを連想させるようなものをしっかり探してくる
多少でも加工は行う。綺麗なものを使う。
/icons/hr.icon
参考サイト
スライダー