yuipon/Yui Ikeda

[yuipon-ous24]

introduction

• [x] 課題を始める

what is design

• [x] #58

Figma

• [x] 確認問題 1
• [x] 確認問題 2
• [x] 確認問題 3
• [x] 確認問題 4
• [x] コミュニティ

color scheme

• [x] 配色について考える

Web page

• [x] 画面遷移図制作
• [x] Atomic Design
• [x] テキスト・カラーなどの登録
• [x] デバイス対応
• [x] デザイン・動きを伝える

trace

• [x] ヘッダーを作る
• [x] トップを作る
• [x] カフェ紹介を作る
• [x] カードを作る
• [x] ニュース・イベントを作る
• [x] プランを作る
• [x] フッターを作る
• [x] ページを完成させる

final

• [x] 最終課題画面遷移図
• [x] 最終課題トップページ制作

ここでやること

1. 終わったら該当の課題にチェックを入れる
2. その課題の中で理解するのに苦労したことや参考になった記事などを貼り、何を学んだのか積極的に発信する
3. 課題を進めていく中で発見したこと、勉強会や定例会などで吸収したことを積極的に記入する
4. 自分の知識を蓄積するノートとして活用する

[yuipon-ous24]

Atomic Design (アトミックデザイン) 画面を構成する要素を、atoms(原子）,molecules（分子）,organisms(有機体）,templates(テンプレート）,pages(ページ）の 5 つの階層に分け、最終的な UI と UI の基礎となるデザインシステムを同時に作成する設計方法

利点 機能やコンポーネント単位で考えることで、デバイスやページの概念に縛られず、動的にデザインできること。 それぞれの階層でコンポーネント化をすることによって修正・変更しやすく、パーツの使い回しもできる。

atoms(原子）,molecules（分子）,organisms(有機体）,templates(テンプレート）,pages(ページ）の階層の明確な分け方はない。わかりやすく整理されており、他者から見てもわかりやすいようであればtemplatesの階層が存在しないなどもありえる。

[yuipon-ous24]

コンポーネントの命名 Atomic Design をする上でパーツは全て Figma のコンポーネント機能使う必要がある。 パーツをわかりやすいように rename することが当たり前だが、コーディングをする際に日本語は一切使わない！ エンジニアがそのままの命名を使えるように、コンポーネントの命名に日本語は使わないようにする。

命名規則

・階層名(atoms,moleculesなど)/パーツ名/(状態) ・user list など、２単語以上ある場合は-で単語を繋げるのがルールです。 　-で単語を繋げることをケバブケースといい、 UI を実装するフロントエンド でよく使う ・小文字のみ使用

例: atoms/button/default, atoms/button/active, atoms/button/hover,molecules/user-list /で区切ることによって、パーツの検索・Variants 機能が使いやすくなります。 activeやhoverなどマウスのアクションが起きた時のデザインも考えよう。

WEB デザインにおけるアセットとは画像やイラスト、アイコンなどサイトで使う素材のこと。

atoms でアイコンに背景を足したり、Templates で埋め込んだり。 エンジニアはブラウザ上でデザインを表現をするために、何も手を加えていないアセットが欲しい。 そのため、アセットはassets/素材名としてまとめておこう。 そうしておけば、エンジニアはこれがデザインで使っている素材であることが一目でわかる。

[yuipon-ous24]

Figma では、カラーやテキストや影などのスタイルを登録することができる。 登録することによって、使っているカラーとテキストが可視化され、サイト全体の統一感にも繋がる。

カラーやテキストの指定をしている部分をホバーすると４つのドットが出現し、すでに登録されているスタイルを選択・適用したり、+ボタンから新しく登録することができる。effect もスタイルの登録ができる。使う際は必ず登録するように。

[yuipon-ous24]

パンくずリスト

パンくずリストとは、上位リンクが並んで表示された領域のこと。現在閲覧中のページがサイト内でどの位置にあるのか確認ができます。ユーザーがトップページを経由せずに、いきなりサイト内のページに辿りついたとしても、パンくずリストがあれば、サイト構造を掴むことができます。

パララックス（英：parallax）

パララックスとは、英語で「視差」という意味です。 視差は、二地点での観測地点の位置の違いによって、対象店が見える方向が異なることや、その角度差という意味があります。 つまり、視差を利用することで「部分ごとに動くスピードが違う」「動く方向が違う」「遠近差がある」といった効果を生むことができます。

[yuipon-ous24]

Shinonome のテキスト Shinonome ではテキストをatoms/textと位置付けてコンポーネントを統一して使っている。 右サイドバーのAssetsのShinonome Text Stylesからtext-wrapを持ってきて構造を見てみましょう。 これからテキストを使う際には Shinonome の text-wrap を使う。

text-wrap--margin は外側の余白で他の要素との余白を取る際に用いる。 text-wrap--padding は内側の余白で、自分の要素の余白を取る際に用いる。 margin と padding の違いをしっかりと理解しよう。

[yuipon-ous24]

テキストの命名 基本的にはShinonome Text Stylesのスタイルを用いる。 文字の大きさはh1,h2,h3,XL,L,M,S,XS,XXSの 9 種類に分かれている。 こちらも/で区切ることによって階層が分かれて管理がしやすい。 Shinonome Text Styles では font-weight の普通・太いの 2 種類でh1/basic,h1/boldのように登録している。 h1,h2,h3 は見出しを表すものである 。

[yuipon-ous24]

カラーの命名 カラーの命名にはHTML CSS Color Pickerを使う。

命名規則

・色名は基本色名_詳細色名で表す ・基本色名は Color Wheel の 6 色（red, orange, yellow, green, blue, ・violet）と白黒灰 3 色(white, black, gray) を合わせた 9 色を使う ・詳細色名は HTML CSS Color Pickerで検索してヒットした色名を使う ・基本小文字で命名し、2 単語以上になる場合は 2 単語目以降の頭文字を大文字で表現する

・色の並べ方はwhite->gray->blue->green->yellow->orange->red->violet->black ・透明度が 100%でない場合は基本色名_詳細色名_透明度のようにする

[yuipon-ous24]

キャメルケース （[英]( camel case）は、[複合語]をひと綴りとして、要素語の最初を[大文字]で書き表すことをいう。

キャメルケースによる表記のうち、“getFullYear” “hasOwnProperty” のように先頭を小文字にする表記法を「ローワーキャメルケース」（LCC：Lower Camel Case）という単にキャメルケースといった場合はこちらを指すことが多い。

一方、“is_uploadedfile” のようにすべて小文字に揃え、語間の空白文字を「」（[アンダースコア）で置き換える表記法を「[スネークケース]（snake case）という。

[yuipon-ous24]

デバイス対応とは

デバイス対応とは、スマホ・タブレット・PC など画面幅に合わせてデザインが崩れることがないようにすること 基本的にはレスポンシブ対応でデザインを作ることが多い

ユーザーが見る端末の画面幅に応じてデザインを調整し、どの環境でも違和感なく見せる必要があります。 デザインをどの画面幅を境に調整するのか、この境目をブレークポイントといいます。 このブレークポイントをいい加減に定めてしまうと、実装側のコードが荒れたりするので慎重に決定しましょう。 ブレークポイントは基本的に bootstrap のブレークポイントに合わせましょう。 bootstrap とはフロントエンド でよく使う CSS フレームワークのこと

Extra small,Small…の行がブレークポイントを表しています。 これらはxs,s,md,lg,xlと省略して呼ばれますので覚えておいてください。 .containerの行の値は bootstrap が設定している余白をつけた際の中身のサイズを表しています。

(username) Design Course Tutorial のブレークポイントと書かれたページにこの表をフレームで表しています。 緑色の範囲が余白です。 左右に余白が欲しいデザインの場合はこの値を使いましょう。

[yuipon-ous24]

assets を用意する アセットとは簡単にいうと素材のことです。 アイコンや YouTube のロゴなどは png や svg のデータとして扱います。 エンジニアにどれを使っているのかわかりやすいようにアセット達を置くフレームを用意するなどしてまとめておきましょう。

アウトライン化 Outline stroke

アウトライン化とはパスで構成されたオブジェクトに変換することです。 文字のアウトライン化をすることで、フォントの情報が破棄され文字が図形化されます。 一度アウトライン化したフォントは、元に戻すことができないので、フォントの情報を text styles に登録しておくなど修正・変更がしやすい状態にしておきましょう。 アウトライン化したいものを選択し右クリックでアウトライン化できる表示が出てきます。

ロゴなどの素材データを作った際はこのようにサイズを変えてみて表示が崩れないか必ず確認しましょう。 また、オブジェクト名もそのままエンジニアが使用できるよう今回の場合はlogoのような適した名前にしましょう。

[yuipon-ous24]

マウスアクションを伝える 今の段階ではコンポーネントにdescriptionを書く欄が用意されているので、その機能を利用してテキストで伝えましょう。 コンポーネントやバリアントを選択している状態で右サイドバーのプロパティパネルに現れます。

文字の折り返しを伝える Web ページの幅は可変です。 文字の幅がデバイスの幅を上回ってしまった場合も考慮することが大切です。

はみ出てしまう文字の折り返しのパターンは主に以下の３つ ・改行され下にずっと続いている ・...の省略記号で省略する ・スクロールでユーザーに続きを読むかどうか判断させるようにする

パターンを伝える ヘッダーのデザイン表示パターンはもっと必要です。

・トップページと動画個別ページでデザインが違う ・登録チャンネルがない(少ない)場合のデザイン ・ログインしている時のしていない時のコンテンツの違い ・ダークモードのデザイン

[yuipon-ous24]

HTML

HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」のことで、WEBページを作成するための言語です。 「マークアップ」とは文章の構成や、文章の役割を示すという意味の言葉です。例えば、見出しや段落・表・リンクなど、文章が構成されている要素がどのような役割を持っているかを指示しています。

CSS

CSSとはWebページの文字の色や大きさ、背景、配置といったスタイル（見た目）を設定する言語です。

[yuipon-ous24]

figma でテキストを縦書きにする方法。

テキストオブジェクトを追加して、縦書きにしたい文章を入力します。

このとき、テキストのフォントは日本語フォントを選択してください。 具体的には、Macなら「Hiragino Kaku Gothic Pro（ヒラギノ 角ゴシック Pro）」「Hiragino Mincho Pro（ヒラギノ 明朝 Pro）」「Hiragino Sans」などのOS標準のフォントで構いません。その他、「[Noto Sans JP]」などオープンソースのフォントでも使用可能です。

テキストオブジェクトの幅（Width）と行間（Line height）を、フォントサイズと同じ大きさにする。 これで、１行だけの縦書きの文章になります。

Textのオプションで「Vertical alternates」を「有効」にする。 １行になったテキストオブジェクトを選択する 右プロパティの「…」をクリックしてフォントの詳細設定のポップアップを開く ポップアップ内の「Letterforms」に「Vertical alternates」があるので、スイッチボタンの「✅ 」をクリックして有効化する

[yuipon-ous24]

コース課題43.トップを作る

サイトの画面上にカーソルを置いて、右クリックして開発者ツールで調査する を押して、ディメンションをレスポンシブにして、ブレークポイントを調べる。今回のデモサイトは767px。 atoms,molecules,pages などのアトミックデザインに気をつける。 コンポーネント化する。 共通パーツのページに置くのを忘れない。

[yuipon-ous24]

オートレイアウト　Shift + A フレームを追加するときは、これでする

フレームに合わせて内容を動かせる状態にしたいときは、横がFill で、縦がHug

[yuipon-ous24]

サイズは、4の倍数か8の倍数がいい

[yuipon-ous24]

default とか、hover のバリアントのPuropaties の名前は、mouseactions じゃなくて、status と書く！ デザインコース内でstatusで統一されている。

[yuipon-ous24]

テキストだけのバリアントはいらない

[yuipon-ous24]

丸のオブジェクトをホバーしたときに出てくる点から編集ができる

[yuipon-ous24]

[yuipon-ous24]

ボタンだけbreakpointが存在する場合があるので気を付ける。

[yuipon-ous24]

考える画面の幅は380pxまで

[yuipon-ous24]

[yuipon-ous24]

[yuipon-ous24]

アウトライン化　Ctrl + Shift + O

Figmaデザインでアウトラインを表示することは、キャンバスにX線装置を置くようなもので、非表示のレイヤーやネストされたレイヤーの検査、選択、調整が容易になります。

非表示またはクリップされたオブジェクトを表示および選択する キャンバス上で他のレイヤーの背後にあるオブジェクトを選択する 内側、中央、外側の配置などの線の詳細を表示する ブール演算のすべての部分を表示する

[yuipon-ous24]

アイコンの大きさを見た目的に揃えたいときは、

SVGデータ（ベクターデータ）を選択して、 Shift + Alt を押しながらカーソルを動かして大きさを変更するといい。

または、アイコンの外側にFixed Fixed にしたフレームをオートレイアウトで追加して、真ん中のにして、フレームの大きさを調節する。そのあとに、オートレイアウトを解除する。

[yuipon-ous24]

cards の md でコンセプトの文章量が一番多いから、サービスとフロアーの縦幅がコンセプトのカードの縦幅に従うようになっている。 この場合は、コンセプトの縦幅を Hug にして、他２つを Fill にする。

[yuipon-ous24]

Web デザイン完成までの流れ

1. 仕様書を元に画面遷移図を作成する

2. ワイヤーフレームを作成する どこにどのパーツが配置されるかを大まかに示したものです。デザインはここでは考えず、最低限の機能が伝わるよう作成します。

3.エンジニア向けの説明を作成する １フレームを１パーツまたは１ページの説明となるように作成 ・説明するロジックパーツ(左上) ・ワイヤーフレーム (画像はデザインカンプ) ・仕様書の文言 ・周辺の画面遷移図 を置くとわかりやすい

4. クライアント・ターゲットを分析する その Web サービスを使うユーザーの層やクライアントの分析をし、コンセプトを決めましょう。 フォントは、Google fontから選ぶことが多いです。

5. デザインカンプを作成する ワイヤーフレームを肉付けするようにデザインを完成させていきましょう。 配色にもこだわりましょう。 同じ色を使っても使う面積によって与える印象はガラッと変わります。

どのパーツを用いて表現するか考える https://csslayout.io/ があらかたのパーツを網羅しています。 参考にしてください。 コンセプトにあったデザイン例を探す dribbble などでパーツ名を検索しイメージを膨らませましょう。 適宜参考にしてください。 素材集

6. UX 検証 ユーザビリティ（使いやすさ）・UX（心地よさ）を検証します。

[yuipon-ous24]

セリフ体　サンセリフ体　フォントについて

セリフとはアルファベットのストロークの端にある小さな飾りを指し、代表的なフォントではTimes New RomanやGaramond、つまり文字にウロコのある書体のことで日本語の明朝体に近い印象です。この小さな飾りは更に数種類に別れています。

Times New Roman

Century

Garamond

Trajan

Didot

[yuipon-ous24]

つづき

サンセリフの「サン」とはフランス語で「無い」という意味です。つまりセリフの無い書体がサンセリフであり、日本語のゴシック体と同じ印象のフォントです。

サンセリフ体は親しみやすくカジュアルな印象があり、見出しやwebでよく用いられる書体です。サンセリフ体の中で特に注目したいのがコンデンスドフォント（幅が狭い）とエクステンデッドフォント（幅が広い）です。海外の広告ではコンデンスドフォントは使用される頻度が高く、特に少ないスペースでもしっかり情報を伝える必要がある場合に使用されています。

コンデンスドフォント（幅が狭い）

エクステンデッドフォント（幅が広い）

サンセリフ体の代表的なフォント

Arial

Helvetica

Futura

Myriad

Verdana

[yuipon-ous24]

カラーの登録を新しくしたら、カラーの順番を並べ替える。 色の並べ方はwhite->gray->blue->green->yellow->orange->red->violet->black

[yuipon-ous24]

BtoB と BtoC

BtoB（Business to Business）とは、企業どうしの商取引全般を指します。メーカーから卸売業者への販売、卸売業者から小売店への販売をはじめ、ベンダーが企業に対してシステムを販売する例もBtoBにあたります。

BtoC（Business to Customer）とは、企業が一般消費者に対して、商品やサービスを提供するビジネスモデルです。コンビニエンスストアやスーパーマーケットなどの小売店をはじめ、レストランや遊園地などもBtoCの一例です。日常生活のなかで利用する店舗のほとんどはBtoCにあたります。

CtoC（Consumer to Customer）とは、一般消費者が一般消費者に対して、商品やサービスを提供するビジネスモデルです。個人のユーザーが出品できるネットオークションやフリマアプリなどがあたり、代表的なプラットフォームにはヤフオク！やメルカリなどがあります。

DtoC（Direct to Customer）とは、メーカーが一般消費者に対して、商品やサービスを直接提供するビジネスモデルです。

BtoE（Business to Employee）とは、企業が従業員に対して、商品やサービスを提供するビジネスモデルです。

BtoG（Business to Government）とは、企業が行政に対して、商品やサービスを提供するビジネスモデルです。

GtoC（Government to Customer）とは、行政が一般消費者に対して、商品やサービスを提供するビジネスモデルです。

[yuipon-ous24]

SEO対策(検索エンジン最適化)：自社のWEBサイトを検索上位に表示させてアクセスを獲得する

[yuipon-ous24]

Enter（1つ下のレイヤーを選択） shift+Enter（1つ上のレイヤーを選択） Ctrl押しながらclick（ターゲット選択） Ctrl+shiftを押しながらclick（複数ターゲット選択）

[yuipon-ous24]

$123,456,789.00% と入力すると、フォントを比較しやすい。

等幅ライニングのフォントを使おう。

[yuipon-ous24]

FloatingButton フローティングアクションボタン（FAB）

画面の決まった場所に、常に表示されているボタン

[yuipon-ous24]

「コロナの感染者数が1桁台になった」のような「1桁台」「2桁台」「3桁台」を表す場合には、”single/double/triple” を使った、 single digits double digits triple digits という表現がとてもよく使われます。

[yuipon-ous24]

ユーザーがテキストを入力するパーツは、 改行ありかなしか、 改行ありなら改行制限は何行か、 横何文字で改行なのか、 改行制限があるとき続きは見切れるのか、…で省略されるのか ちゃんと考えて説明をコンポーネントコンフィグレーションに記入する！

[yuipon-ous24]

画面幅が変わったときにパーツの幅が崩れないようなデザインを作るか、パーツの比率をエンジニアに説明する！

[yuipon-ous24]

ニューモーフィズムとは、アイコンなどの素材があたかも押せるように見える、デコボコしたデザインのことです。 単色または少ない色数で全体をまとめて、ドロップシャドウで陰影をつけデコボコ感を出します。

リアリティーがありシンプルで機能性が高く、直観的に使いやすそうと感じるところがニューモーフィズムの特徴です。

[yuipon-ous24]

「アイソメトリック」とは、横幅・奥行き・高さの3方向でつくる角度がそれぞれ120度になるように描く図法で、簡単にいうと、斜めうえから見たようなイメージで立体感を演出する技法です。

建築の図面などに使われる描き方ですが、最近ではメルカリのロゴに使われているので見たことがある方も多いでしょう。横の軸が120度で交わるように描き、立体感や奥行きを感じさせるデザインです。

[yuipon-ous24]

レトロモダンとは、昔のレトロなデザインと今のトレンドを組み合わせたものです。ノスタルジアをイメージさせるイラストやデザインスタイル、無機質な質感などがレトロモダンの特徴です。

現在最も流行っているレトロモダンデザインの１つは、1980年代と1990年代をイメージさせるデザインです。レトロモダンを効果的に使うには、ただ古臭く見えるだけのデザインにならないように上手にトレンドを取り入れることが大切です。

[yuipon-ous24]

参考サイトまとめ

https://webdesigner-begins.com/web-design/130/

どこでも待合室　可愛すぎる！ https://dokodemo.app/ja/

岡本歯科医院　ロゴもサイトの雰囲気も可愛すぎる http://okamoto-dental.clinic/

紙のミルフィーユ　商品の写真をホバーしたときのホバーアクションが好きすぎる！サイトの柔らかい雰囲気を保つどころかもっと好きーってなったよね https://kamino-mf.com/

[yuipon-ous24]

https://guntu.jp/

左下の下向き矢印のボタンを押さないとスクロールさえできない すごいね、こんなデザインというか誘導というのか、ありなんだね！一生メインビジュアルだね笑

[yuipon-ous24]

表示に合ったサイズでレスポンシブデザインの切り替えを実行するブレイクポイントは、以下のように設定します。

スマホ 320〜519px

タブレット 560〜959px

PC 960px以上

上記のブレイクポイントはあくまで表示の切り替え用であり、デザインに合わせて別途

ブレイクポイントを指定してリキッドレイアウトを指定します。

https://digitor.jp/textbook/responsive-tablet/

[yuipon-ous24]

タブレットで表示しにくそうな表とかは、見切れて横スクロールできるようにするっていうのでも全然いい！

[yuipon-ous24]

アクションをより操作しやすいように、「タッチ・ホットゾーン」を有効利用しましょう。

「メニュー」「カートに追加」「購入ボタン」などコンバージョンに重要な要素を、手の届きやすい場所に配置しましょう。

https://webtan.impress.co.jp/e/2014/03/10/16981

[yuipon-ous24]

・簡単にコンテンツにたどり着けるように、以下のことを意識しながらデータ構造を設計する。 　→最小限のタップ数 　→スワイプ数 　→画面数

Button ・44pt x 44ptの最小タップ領域を確保する。 　→これ以上小さくなると、ユーザーがボタンにタッチしにくくなる。 ・否定的な情報は基本的に左に配置する。 　→プラットフォームによっては必ずしも左が否定とは限りません。 ・タイトルは長くしない。 ・必要に応じて、枠線や背景を追加する。

[yuipon-ous24]

[yuipon-ous24]