グラフィック

Q

デザイン力って何？

A

Webデザイナーとして良いデザインを早く作れる能力！

その能力をつけるためには、以下の2つが大事！

・センス（勘）を磨く！

・理論を覚える！

デザイン力のつけ方

Q

センス（勘）を磨くには？

A

センスは生まれ持ったものではなく、磨くことができる。
そのために、まずはトレースしてセンスを磨こう！

トレースとは？
完成品のデザイン見て、同じものをつくること！
トレースをたくさんやると…
『何色にしよう？』『どれくらい余白を空けよう？』
↓
『なんとなくこの色がいい』『これくらい余白をとるとキレイ』

なんとなく正解が見えるようになる！
センスは生まれ持ったものではなく、磨くことができる。

▼ 参考サイト
https://www.pinterest.jp

https://muuuuu.org

https://io3000.com

http://lp-web.com

デザイン力のつけ方

Q

理論を学ぼう！

A

理論を学ぶとしっかりと理由を持ってデザインができます。

『なんとなくこの色』『なんとなくキレイな余白』
↓
『〇〇だからこの色にしよう』『〇〇だからこれだけ余白を空けよう』
→なんとなくだと、クライアントさんは、理由が無いと納得してくれない！

▼ 感覚派デザイナーも知っておいて損はない「デザインの要素と原則」

https://webnaut.jp/design/620.html

デザイン力のつけ方

Q

Photoshopのプロパティパネル出し方

A

Photoshopのメニューバーの「ウィンドウ」からプロパティパネルを表示することができます。
「プロパティ」という項目があるので、そちらをクリックしてください。

パネル

Photoshop

GD課題2

Q

企業サイトトップページはガイドラインがあったのに、企業サイトサービスページはなぜガイドラインがないのでしょうか？

A

ガイドについては、ご自身で引いていただいてもかまいません。
トップページはゼロベースでスタートしたためガイドを引いて基準を決めています。

今回のデザインに限っては下層ページはヘッダーやフッターも共通のデータを使い、
写真もちょうどサイトの半分のサイズだったりと、分かりやすい位置で設定しているため
ガイドを利用していないと思います。

しかし、デザインを作成するにあたって、ガイドは大切な要素ですので、
動画に合わせず、ご自身でガイドを用意していただいても問題ございません。

今後新規でデザインを作成していくことになりますが、その際はガイドを引いていってくださいね。

ガイドライン

GD課題2

GD課題3

Q

最初のガイドラインを作成するとき、位置の調整するコツはありますか？

A

新規ガイド作成で、ピクセルを入力すると、その位置に正確にガイドがひかれます。

ピクセル入力が一番正確な方法です。
それ以外には、ルーラーがphotoshop上に表示されている状態で、上または左からドラッグすると、新規ガイドが作成されます。

アートボードでズームすることによって、わりと意図したところに近い位置でガイドを引くことができますが、正確に引くにはピクセル入力となります。

ガイドライン

GD課題2

GD課題3

Q

全体を選択しても動かない

A

ツールパネルより、「移動ツール」を選択します。

その際、上のバーの「自動選択ツール」のチェックボックスにチェックが入っていることを確認してください。

チェックが入っていなければ、チェックを入れてください。

その後、アートボード上の選択したいオブジェクトを選択。

クリックしたままドロップすると任意の場所に動かすことができます。

選択ツール

Q

手のひらツールと選択ツールの違い

A

イメージとしては、

今、折り紙で作ったお花を 画用紙にたくさん貼り付けて作品を作っているとします。

端っこに花を貼り付ける時には、画用紙の端っこが自分の目の前に来るように、画用紙を動かしますよね。

それが手のひらツールでやっていることです。

つまり、自分が作業しやすいように、見やすいようにアートボードを動かしているイメージです。

それにひきかえ、選択ツールは、オブジェクトを選択する時に使います。

この例えで言うと、一度画用紙の上に配置した花を、つまんで、別の場所に動かす時に使います。

選択ツール

Q

余白やコンテンツ、背景色の配置等の大きさを細かく指定する理由はありますか？

A

実際の現場では、TOPページを作った後、その余白ルールを下層ページに反映させていきます。

TOPページは確かに、最初バランスをみながら作成していくのですが、ある程度形になってきた時点で、細かくピクセル余白を意識していきます。

また、サイトは新規ページだけではなく、一部のデザイン変更をすることも多くあるので、
その際は実際のページが何ピクセルで余白やコンテンツが作られているか確認してから制作していきます。

単位・数値関連

デザインカンプ

GD課題3

Q

Webサイトのデザインを作成する際のサイズの目安はありますか？

A

現場ではその時々のトレンドを考慮したり、クライアントさんと参考サイトを確認しながら仕様を決めていきます。

ですので、クライアントが明確にサイズは何と指定することはあまりない印象を持っています。

基本的にSPでいえば、横幅750pxが一般的です。

PCは幅広くありますが、コンテンツを収める幅として1200px以内を目安に+ブラウザ幅を考慮して、1400px程度を目安にデザインを決めて頂ければと思います。

この先、修了課題に向けてデザイン、コーディングなどございますので、

もしも、明確にこのサイズでつくりたい、というのが無いようでしたら、
課題で行なったサイズを参考に作成することをおすすめいたします。

単位・数値 関連

デザインカンプ

GD課題3

Q

ダイアログボックスの単位を変更するにはどうすればいいですか？

A

Illustratorの上部メニュー ＞ 環境設定 ＞ 単位　から変更ができます。

単位・数値 関連

Illustrator

GD課題1

Q

印刷する紙などの実物は、基本的にミリメートルを使っていけば良いですか？

A

基本的に、紙媒体とよばれるものの作成はミリメートルで作成することが一般的です。

また、紙媒体のものは、印刷することを想定して作りますので、提出する印刷会社さんのルールに従って作ることが多いです。

例えば、名刺の場合、裁ち落としは何ミリといった指定がある場合が多いです。

単位・数値 関連

Illustrator

Q

Illustratorでの色変更ができない

A

対象オブジェクトの選択はできておりますでしょうか？

先ずは選択ツール(ショートカットV)を選んでから対象オブジェクトをクリック
そのあと、色の変更を行ってみてください。

色関連

Illustrator

GD課題1

Q

Illustratorで文字がドラッグできない

A

１）テキストボックスを選択ツールで選択した場合に、バウンディングボックスが表示され、アクティブになりますでしょうか？

もし、テキストボックスごと選択できなければ、レイヤーにロックがかかっている可能性が考えられます。

ロックはレイヤーパネルを開いた際、左から二列目にある鍵マークです。(一番左は目のマーク)
もしロックがかかっていたら、この鍵マークが表示されており、ここをクリックすることでロックがはずれます。

２）環境設定のテキストオブジェクトの選択範囲

環境設定 ＞ テキスト ＞ テキストオブジェクトの選択範囲をパスに制限 をご確認ください。

こちらにチェックが入っていたら、チェックを外してください。

その他、イラストレーターの調子が悪い時に、再起動で戻る場合がございます。

文字関連

Illustrator

GD課題1

Q

文字サイズを変えずにテキストボックスの大きさを変える方法

A

テキストボックスの編集は、「文字ツール」を選び、編集する文字エリアが点線で囲われた状態で作業しなければいけません。

文字ツールを選んで、該当箇所をクリックするか動画のように該当レイヤーをダブルクリックして、
必ず編集したい文字エリアが点線で囲われる事を確認してから作業をお願いします。

文字関連

Photoshop

GD課題2

Q

三角形→長方形へ変える方法はありますか？（Photoshop）

A

Illustratorであれば、作成後に画数の変更が簡単に行えるのですが、Photoshopですと同じ機能がありません。

厳密に言えば、パスを追加して三角形から4角形にできなくもないですが、作業上手間がかかり、長方形ツールで作り直した方が効率的に作業ができます。

図形関連

Photoshop

GD課題2

Q

カーソルが動きません。

A

「移動ツール」が選択されていないことが原因だと考えられます。

移動ツールを選んだ状態でカーソルを動かしてみてください。

位置調整関連

Q

不要なレイヤーを削除したい。

A

不要なレイヤーが「非表示」になっている場合、それを一括で削除する方法があります。
レイヤーのオプションから「非表示レイヤーを削除」を選択します。

▼ こちらより手順をご確認ください。

https://seisaku-plus.com/2017/05/31/delete-layer/

ただ、「後で使う予定で非表示にしていた」といったようなレイヤーも消えてしまうため、用途については注意が必要です。

レイヤー関連

GD課題2

Q

レイヤーを常に上に持っていく理由はありますか。

A

レイヤーは「重ねた順」に表示されます。

順番としては、「デザインでどう見せる必要があるか」でレイヤーの順序がきまります。

また、作業効率などを考えると、

・header

・top_section

・menu_section

というようなエリアでフォルダをわけ、作っていった順番通りに並べていったほうが、
作業はしやすいですし、そういったルールを習慣づけておくことが、作業短縮に繋がります。

「レイヤーの重なり順を考えた上で」レイヤーを上に持っていく習慣を身につけるのが良いかと思います。

レイヤー関連

GD課題2

Q

レイヤーマスクを掛ける選択範囲がわからない

A

こちらの作業は、非常によく使うのでこの際覚えて頂ければと思います。
特定の決まったエリアにマスクをかけたい場合、以下の手順でお試しください。

１）Ctrl（Mac：Command）キーを押しながら該当レイヤー（マスクの場合は該当マスク）をクリックすると選択範囲を選ぶことができます。

２）そうすると、該当箇所が選択されて、点線が表示されます。

３）点線を確認したら、マスクをかけたいレイヤーを選択した状態で、マスクをクリックします。

レイヤーマスク関連

GD課題2

GD課題3

Q

レイヤーマスクとクリッピングは、どういう風に使い分けをすればいいのでしょうか？

A

正直なところ、どちらを使っていただいても構いません。

役割の違いを説明するとなると、以下のポイントを押さえて頂ければと思います。

・レイヤーマスク：特殊作業でのマスク（グラデーションやブラシ）の対応が可能

・クリッピングマスク：2枚のレイヤーで瞬時にマスクが作成できる

▼ 参考

https://www.asobou.co.jp/blog/web/photoshop-mask

クリッピングマスクは作成が楽なのですが、レイヤーがずれやすかったり、

移動するときに2枚のレイヤーを一緒に動かしてあげなければいけなかったりと、
簡単なのですがデメリットもあったりします。

やっていく中で使い勝手がだんだんわかってくると思いますので、
何はどれを使わなきゃいけないというのではなく、
使いやすい方を使うというイメージで進めていただいて大丈夫です。

クリッピングマスク

レイヤーマスク関連

GD課題2

GD課題3

Q

なげなわツールで選択後に、反転はしたものの削除ができません。

A

以下の2点をご確認ください。

１）レイヤーの表示・非表示

現在レイヤーは2つあるかと思います。
なげなわツールで切り抜き作業をしていない、上のレイヤーは非表示にしていますでしょうか？

非表示にされていない場合、上のレイヤーは非表示にしてください。

２）レイヤーが正しく選択されているか

レイヤーの選択は間違えないでしょうか？
削除する際に、該当の2番目のレイヤーが選択されていることをご確認ください。

なげなわツール関連

Photoshop

GD課題2

GD課題3

Q

ベクトルマスクが作成できない

A

対象レイヤーが間違いなく選択された状態で、ペンツールの切り抜きを行なっているかご確認ください。
レイヤーが選ばれていないとベクトルマスクを作ることができません。

ベクトルマスク関連

Photoshop

GD課題2

GD課題3

Q

パスファインダーが解除できない

A

パスファインダーを実行した後は、

Mac = Command + Z
Windows = Ctrl + Z

での作業の取り消しでしか解除することができないと認識しております。
作業ミスや、後の修正に強いファイルを作るには、「複合シェイプの作成」という方法がございます。

■ 方法

１） 仮で合体させたい、シェイプを選択します

２） 選択した状態でパスファインダーのオプション(三本線)より、「複合シェイプを作成」を選びます。

または、合体を選ぶ際に

Mac = Option
Windows = Alt

を押しながら選択することで、「複合シェイプを作成」することができます。
上記の方法を実行することで、仮で合体した状態となります。

解除するには、パスファインダーのオプション(三本線)より解除を選択することができます。

３） 最終的に合体したい場合は、パスファインダー内の「拡張」を押すことで、合体の形状になります。

パスファインダー関連

Q

Photoshopでアートボードの追加ができない

A

■ アートボードの上下左右に＋のマークが出ない原因

Photoshopでファイルを新規作成する際に「アートボード」にチェックを入れなかった場合、

アートボードが無い状態でファイルが作成されます。

恐らくこの状態でファイルが作成されて、レイヤーのみになっていることが原因かと思われます。

※アートボードが有る状態になれば、アートボードのタイトル（Artboard１などの文字）も表示されます。

■ 後からアートボードを追加する方法

１）ツールバーでアートボードツールを選択

２）オプションバーのサイズ入力の箇所で任意のサイズを入力

３）プラスボタンを選択してください。

その状態で、アートボードを追加したいワークスペースの場所をクリックすると、アートボードが表示されます。

アートボード関連

GD課題3

Q

スマホのデザイン調整について

A

レスポンシブデザインにする以上、できるだけ共通のデザインとできるに越したことはありませんが、

ユーザビリティを考慮しPC・SPで切り替えるべきところは切り替えていく必要がございます。

なおサイト作成後、Google Analytics等で分析しますと、少なくとも半分以上のユーザーがスマホで閲覧しているということがほとんどです。
（BtoBのサービスページなどはPC閲覧も多いので一概に言えないところはございます）

ですので、「モバイルファーストで制作する（どうしてもどちらか取らねばならない時はモバイルを優先する）」というところを念頭に置いていただけるとより良いサイトになっていくかと思います。

アートボード関連

HTML / CSS

Q

名前をつけるときは連番は避けよう。

A

コーディングのコツ

Q

各言語の役割を意識して、コーディングしよう。

A

・HTML　→　内容

・CSS　→　レイアウト、装飾

・JS　→　プログラム、システム

↓例えばこんなときに役立つ。

ex）画像を配置するとき、その画像が

内容だったら　HTMLの『imgタグ』

装飾だったら　CSSの『background-image』

コーディングのコツ

Q

HTML完成→CSS着手の順番でなくてOK

A

装飾だったら

HTMLを完成させる。
↓
CSSを書く。

ではなく、
１セクション分のHTMLを書く
↓
そのセクションのCSSを書く
↓
次のセクションのHTMLを書く

というような順番でもOK。

コーディングのコツ

Q

デベロッパーツールを使いこなそう

A

【参考サイト】 操作しながら覚える！Chrome デベロッパーツールの使い方：超初級編

https://pomaika.net/164/

コーディングのコツ

Q

HTML コンテンツ・モデル

A

HTMLのタグは

・メタデータコンテンツ

・フローコンテンツ

・セクショニングコンテンツ

・ヘッディングコンテンツ

・フレージングコンテンツ

・エンベディッドコンテンツ

・インタラクティブコンテンツ

に分けられる！（重複しているものもある。）

これを元に、どのタグの中にどのタグを書いていいか（入れ子ルール）決まっています。

▼ コンテンツモデルについて詳しく知りたい場合はこちら

https://webliker.info/46840

▼ 入れ子ルールをぱぱっと確認したい場合はこちら

https://yoshikawaweb.com/element/

CSSと仲良くなるための基礎

Q

よくある勘違い

A

<img>や<br>にはclass属性をつけられない。

→つけられます！！

ex)

<img class=”.foo” src=”images/img.jpg”>

<br class=”.pc”>

CSSと仲良くなるための基礎

Q

メディアクエリの賢い書き方

A

https://codepen.io/hgmlrrnu/pen/VwLZemr

CSSと仲良くなるための基礎

Q

子孫セレクタ

A

CSSと仲良くなるための基礎

Q

プロパティと値

A

CSSと仲良くなるための基礎

Q

初期値

A

div{

background-color: red;

height: 100px;

}

上記のようにwidthを設定してないのに横幅があるのが変に感じることはないですか？

https://developer.mozilla.org/ja/docs/Web/CSS/width

CSSのプロパティにはすべて、初期値が存在しますのでご注意を！

CSSと仲良くなるための基礎

Q

『％』は何を基準にしてる？

A

％という単位は、何かに対しての割合を表します。

widthを％指定するときは、基本的には親要素の横幅を基準にしています。

▼ 参考

https://developer.mozilla.org/ja/docs/Web/CSS/width

※％を使うときに、何を基準にしてるかは、プロパティによって違います！

CSSと仲良くなるための基礎

Q

flexと知り合いになろう！

A

flexを覚えると、ほとんどのレイアウトができちゃう！

友達になるのは簡単じゃないので、まずは知り合いになろう。

・フレックスコンテナーと、フレックスアイテム

・flex-directionと主軸、交差軸

・justify-content（主軸の整列）

・align-items（交差軸の整列） ・flex-wrap

CSSと仲良くなるための基礎

Q

フレックスコンテナーと、フレックスアイテム

A

CSSと仲良くなるための基礎

Q

flex-directionと主軸、交差軸

A

flex-direcrtionとは？

・CSSのプロパティの一つ。

・フレックスコンテナーに書く。

・値によって、主軸と交差軸の方向を決めます。

・フレックスアイテムは主軸にそって並びます。

CSSと仲良くなるための基礎

Q

justify-content（主軸の整列）

A

justify-contentとは？

・CSSのプロパティの一つ。

・フレックスコンテナーに書く。

・値によって、フレックスアイテムを、主軸方向で整列させます。

CSSと仲良くなるための基礎

Q

align-items（交差軸の整列）

A

align-itemsとは？

・CSSのプロパティの一つ。

・フレックスコンテナーに書く。

・値によって、フレックスアイテムを、交差軸方向で整列させます。

CSSと仲良くなるための基礎

Q

flex-wrap

A

・CSSのプロパティの一つ

・フレックスコンテナーに書く

・値によって、フレックスアイテムを1行に並べるか、複数行に並べるかを制御します

・今は迷わず　flex-wrap: wrap;（複数行に並べる）を設定しておいて下さい

・今は迷わず、display: flex; とセットで書きましょう

▼ flexの参考サイト『日本語対応！CSS Flexboxのチートシートを作ったので配布します』

https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

CSSと仲良くなるための基礎

Q

positionと仲良くなろう

A

▼ positionの値解説

static・・・初期値。実はいつも使っている。いつものやつ。

relative・・・自分を基準に、位置を決定。

absolute・・・staticではない一番近い外側の要素を基準に、位置を決定。

fixed・・・windowを基準に、位置を決定。

CSSと仲良くなるための基礎

Q

position:〇〇は最低限に！

A

position:〇〇は極力使わないようにしましょう。

使う必要があるときだけ使いましょう。

レイアウトが崩れたり、 レスポンシブ対応の際に苦労したりする原因になります。

position:〇〇系のことがよくわかっていない方は、 トレーナーに教えてもらいましょう。

CSSと仲良くなるための基礎

Q

position: relative;

A

CSSと仲良くなるための基礎

Q

position: absolute;

A

CSSと仲良くなるための基礎

Q

CSSの記載の順序にルールや影響はあるのでしょうか？

A

順不同で問題ございません。

自分なりにわかりやすいルール作りをされることをおすすめします。

例えば背景画像の場合、最初は画像指定、次に画像サイズ、次に位置、次にrepeatなど。

HTML/CSS

CD課題1

CD課題2

Q

paddingがうまく反映されません。

A

border-boxが記述されていない可能性がございます。

以下の記述がされているか、ご確認ください。

*,*:before,*:after {
　box-sizing: border-box;
}

border-box関連

HTML/CSS

小課題2

小課題3

CD課題1

CD課題2

Q

video要素の下にある余白を消したいです。

A

videoタグはinline要素のため、block要素に指定する必要があります。

videoの要素に対して「display: block;」を追加してみてください。

padding margin

HTML/CSS

小課題3

CD課題1

CD課題2

Q

paddingとmarginの使い分けがよくわかりません。

A

基本的にはmarginでもpaddingでもどちらでも余白の設定が可能なケースが多いと思います。
各要素ごとにバラバラにmargin、paddingを仕様するとあとで修正するときに困りますので
自分なりのルールを決められるといいと思います。

ルールは以下のように設定したりします。

「親子間の余白はpadding、兄弟間の余白はmargin」

親子要素間ではpaddingを使用して、兄弟要素間の上下間ではmargin-bottomを使用しています。

　※以下のサイトでは兄弟要素間の上下はmargin-topとしております。

▼ 参考

https://eclair.company/media/difference-between-margin-and-padding/

padding margin

HTML/CSS

CD課題1

CD課題2

Q

positionの使い方がわからない

A

まず、位置を指定されようとしている子要素の「親要素」に対して

「position: relative;」を記述します。

次に、位置を指定したい子要素に対して

「position: absolute;」を記述します。

そして、位置指定したい場所に合わせて「top/right/bottom/left」の数値を調整してください。

▼ 参考になりそうなサイトを以下に記載いたします。

https://saruwakakun.com/html-css/basic/relative-absolute-fixed

https://jajaaan.co.jp/web-production/frontend/position/

位置 position

小課題2

CD課題1

CD課題2

Q

文字の要素の位置指定がうまくいきません。

A

親要素に対して「text-align: center;」を指定されておりませんでしょうか。

親要素に「text-align: center;」が指定されている状態で、

子要素のインライン要素（smallタグ）にposition: absolute;をすると、

意図せぬ場所に移動してしまうようです。

▼ 参考

https://tomotan.hateblo.jp/entry/position-relative-absolute

位置 position

HTML/CSS

中間課題

修了課題

JavaScript

Q

jQueryとは？

A

jQueryとは、「JavaScriptでできることを、より少ないコードでコンパクトかつ便利にまとめた、簡単に記述できるようにしたもの」です。

クリックしたら画像が切り替わる、
マウスオーバーした要素がアニメーションのように動く、
時間によってページの色を変化するなど、

JavaScriptで書くと時間がかかってしまいますが、
jQueryを使うことで簡単に記述できます。

▼ 参考

https://school.dhw.co.jp/course/web/contents/w_jQuery.html

jQuery

JavaScript