Webデザイン講座「デザイン性 編 その2」
こんにちは、今回のテーマは「Webデザイン性 編 その2」です。前回は色なしのモックアップ状態までの制作でしたが、今回はその続きとして、色をつけたり画像を加えたりして完成までのプロセスを解説します。
画像の準備
まず最初に、使いたい画像を準備しましょう。今回使用する画像は5つ用意しました。
おすすめのフリー写真素材サイト: - マシナリさん - フォトAC - た草津さん
もちろん、オリジナルの画像を使用する事も可能です。
色の選定
色の用意は少し工夫が必要です。以下の手順で色を選定していくとスムーズに進行できます。
- 参考になる画像を用意する。
- スポイトツールを使って、その画像から色を抽出する。
┌───────────────┐
│ 色の参考画像 │
│ ┌──────────┐ │
│ │ スポイトツール │ │
│ └──────────┘ │
│ ← この色を抽出 │
└───────────────┘
これで効率的に色を選ぶ事ができます。
アートボードと背景の設定
次に、アートボードを外し、背景を設定します。アートボードを使わず資格を描いて、その資格を背景として利用します。
資格の作成と背景設定の手順: 1. 資格を描く。 2. 資格の位置をページの背景に設定する。 3. 資格を背面に送る（Ctrl + Q）。
┌───────┐
│ │
│ 背景色 │ ★ 背面
│ │
└───────┘
┌───────┐
│ │
│ 公開する内容 │ ★ 前面
│ │
└───────┘
画像の配置とマスク
トップページで使用する画像を配置し、その後、適切な場所にマスクをかけていきます。画像の配置はドラッグ＆ドロップで簡単に行えます。
[ ドラッグ＆ドロップ ]
┌─────────────┐
│ │
│ 画像をドロップ │
│ │
└─────────────┘
┌───[配置完了]───┐
画像 画像
その後、マスクをかけることで、必要な部分だけを表示できます。
背景色の設定
背景色を設定するために、スポイトツールを使って色を変更します。
具体的な手順: 1. 背景の資格を選択。 2. スポイトツールで色を選択。 3. 前面の要素を再背面へ。
┌─────────────┐
│ 背景色 │
│ ┌─────┐ │
│ │ 色変更 │ │
│ └─────┘ │
└─────────────┘
グローバルナビゲーションの作成
グローバルナビゲーション部分には、連絡先情報を表示してユーザビリティを向上させます。
具体的な内容 - 電話番号: 表示例: 03-0000-0000 - メール: sample@mail.com
┌───────────────┐
│ グローバルナビゲーション │
│ │ 電話: 03-0000-0000 │ │
│ │ メール: sample@mail.com │
└───────────────┘
最終調整と保存
色や細部の調整を行い、デザインを仕上げていきます。最終的には、プロジェクトを必ず保存し、なくさないように確保します。
この一連の作業を行うことで、Webデザインの完成度が格段に上がります。次回は、コーディングに進みますので、またお会いしましょう。お疲れ様でした!
【補足】
スクリーンショットについてなどは、機種ごとに操作方法が異なるので、自身の機種に最適なツールやショートカットを事前に調べて使用してください。
タイムスタンプ
1 00:00:00,650 --> 00:00:03,649 ana
2 00:00:03,950 --> 00:00:06,700 me
3 00:00:08,250 --> 00:00:16,939 はい前回のか
4 00:00:12,580 --> 00:00:20,780 今日は web デザイン性編その2ですねー
5 00:00:16,940 --> 00:00:23,340 前回はですね色なしのモックアップ状態まで作りました
6 00:00:20,780 --> 00:00:26,400 これを a 棟
7 00:00:23,339 --> 00:00:28,980 色を付けたり画像を加えたりしてですね
8 00:00:26,399 --> 00:00:30,579 完成させてみようかなぁと
9 00:00:28,980 --> 00:00:31,910 思います
10 00:00:30,579 --> 00:00:38,390 じゃあ
11 00:00:31,910 --> 00:00:40,850 えっと今回の音色とか画像をつける前まず画像を用意するというところですね
12 00:00:38,390 --> 00:00:46,009 画像用意するのは
13 00:00:40,850 --> 00:00:53,480 ページでこのトップページで使用する画像あらかじめちょっと用意してもらうんです
14 00:00:46,009 --> 00:00:54,899 けれども私の場合この五つですかね12三振を5つの画像を用意しました
15 00:00:53,479 --> 00:01:00,659 で
16 00:00:54,899 --> 00:01:02,489 次へえーまぁそうですね以下のサイトからダウンロードするのがお勧めとマシナリさん
17 00:01:00,659 --> 00:01:06,219 とかフォト ac とか
18 00:01:02,490 --> 00:01:12,640 た草津さんとかですねそういうあのフリーの
19 00:01:06,219 --> 00:01:15,879 8写真素材サイトかありますので他の見つけてダウンロードするといいかなと
20 00:01:12,640 --> 00:01:19,650 もちろんですねオリジナルの画像を使う方
21 00:01:15,879 --> 00:01:19,649 自分で画像を持ってるからそれを使ってください
22 00:01:19,689 --> 00:01:29,629 じゃあ次えっと色を用意すると
23 00:01:24,019 --> 00:01:36,769 色はですねあのまぁこんな色を使いたいなと言いらそれぞれ一から作っていくのもいい
24 00:01:29,629 --> 00:01:41,209 んですけれども参考になるようなものなんか画像を用意してですねその画像をスポイト
25 00:01:36,769 --> 00:01:43,420 ツールというのがライラ添えてあるんですけどこの画像の中が好きな色を使っていく
26 00:01:41,209 --> 00:01:45,109 みたいな感じで
27 00:01:43,420 --> 00:01:48,480 8色
28 00:01:45,109 --> 00:01:53,489 決めていくと良いんじゃないかなと思います
29 00:01:48,480 --> 00:01:59,350 まあじゃあとりあえずですねやってみましょうか
30 00:01:53,489 --> 00:02:00,780 はいえーどうじゃあこれでですねいるとか画像をつけるんですけれども
31 00:01:59,349 --> 00:02:05,879 その前に
32 00:02:00,780 --> 00:02:07,200 アートボードがこれ表示されてるんですねこれアートボードは外しちゃいます表示
33 00:02:05,879 --> 00:02:10,909 メニューはなくから
34 00:02:07,200 --> 00:02:10,909 アートボードを画数
35 00:02:11,020 --> 00:02:19,480 あとボードを隠すとですねこのように周りがなくなっちゃうじゃないですか
36 00:02:16,300 --> 00:02:22,980 なのでダートボード
37 00:02:19,479 --> 00:02:28,149 と同じような役割をするための資格を書くんですね
38 00:02:22,979 --> 00:02:30,489 資格をこうやってこれがページのなんていうんでしょうか
39 00:02:28,150 --> 00:02:37,000 背景というんでしょうか
40 00:02:30,490 --> 00:02:40,090 こんな感じであるんですけどでもこれ一番前面に来てるんで背面に送ります
41 00:02:37,000 --> 00:02:45,300 えっとコントロール級王者がクリック
42 00:02:40,090 --> 00:02:45,300 windows 機の人右クリ重ね順で采配名
43 00:02:45,759 --> 00:02:52,729 猫なりましたてこうすると何が良いかアートボードに何がいいかというと色をつける
44 00:02:50,799 --> 00:02:56,060 ことができますねー
45 00:02:52,729 --> 00:02:58,859 えっと資格にですね対して
46 00:02:56,060 --> 00:03:01,509 8スウォッチでもいいですね
47 00:02:58,860 --> 00:03:09,540 色こんな感じで
48 00:03:01,509 --> 00:03:13,968 つけていってどんな色が合うのかなというのを試していくことができます
49 00:03:09,539 --> 00:03:13,968 はいじゃあまずまあとりあえず白で
50 00:03:14,530 --> 00:03:20,710 でえっ画像ですよね
51 00:03:18,520 --> 00:03:25,810 じゃ画像を
52 00:03:20,710 --> 00:03:27,280 あと用意しましょうか画像はですねあらかじめ私はダウンロードすデスクトップに置い
53 00:03:25,810 --> 00:03:33,849 てありますんで
54 00:03:27,280 --> 00:03:36,120 この画像をですねドラッグまとめて選択してドラッグ&ドロップここを言っちゃい
55 00:03:33,849 --> 00:03:36,120 ましょう
56 00:03:36,599 --> 00:03:44,199 そうするとこう4つね結構大きい画像ですけれども
57 00:03:40,500 --> 00:03:49,060 きましたねこれ端っこに受けておきます
58 00:03:44,199 --> 00:03:52,389 えっとトップページのこの部分ですよねトップページのこの部分に
59 00:03:49,060 --> 00:03:57,750 えっとまぁなんかこうサービスの紹介ね
60 00:03:52,389 --> 00:04:02,099 big イメージともにサービスの紹介このサービスを見てねって言うような
61 00:03:57,750 --> 00:04:09,659 今回そのアプリ企画制作運営みたいなものババーンとここにで
62 00:04:02,099 --> 00:04:12,049 一つだしてみたいなと思うんですけどそれは8スキルハブですねすくらぶのトップ
63 00:04:09,659 --> 00:04:12,049 ページ
64 00:04:12,129 --> 00:04:19,709 をもう世帯増と雇用好きな部のトップページなんですけどこれをですね
65 00:04:16,899 --> 00:04:24,538 スクリーンシュートをとってなぜちゃいましょうか
66 00:04:19,709 --> 00:04:26,370 スクリーショットはマックの方はコマンドシフトコントロール4
67 00:04:24,538 --> 00:04:28,789 押すとこういうふうに
68 00:04:26,370 --> 00:04:31,230 ドラッグした範囲で
69 00:04:28,790 --> 00:04:36,330 キャプチャーが撮れますんで
70 00:04:31,230 --> 00:04:38,250 キャプチャーをとってください windows の方はですね確かこのないんであの
71 00:04:36,329 --> 00:04:43,430 なんかアプリケーションをダウンロード
72 00:04:38,250 --> 00:04:44,819 ウインショットとかねいうのがありますのでそれをインストールするといいのかなぁと
73 00:04:43,430 --> 00:04:48,300 後いい
74 00:04:44,819 --> 00:04:50,800 dots をスクリーンショットどんどんいいのがあるかもしれないですけど
75 00:04:48,300 --> 00:04:54,639 ちょっと調べてですね
76 00:04:50,800 --> 00:04:57,819 screenshot のためのアプリケーションをインストールして今のように
77 00:04:54,639 --> 00:05:01,509 選択した範囲をコピーできるようにしてください
78 00:04:57,819 --> 00:05:03,490 バッグはコマンドシフトコントロール4
79 00:05:01,509 --> 00:05:07,229 でドラッグすると
80 00:05:03,490 --> 00:05:07,228 でですね今
81 00:05:07,279 --> 00:05:17,329 この写真がパシャって捉えたような音がしてコントロール v 押すと
82 00:05:12,050 --> 00:05:21,670 こんな感じで今の音サイドのキャプチャーが貼り付けられます
83 00:05:17,329 --> 00:05:24,689 でこれをちっちゃくしまして
84 00:05:21,670 --> 00:05:24,689 ここに載せると
85 00:05:26,149 --> 00:05:29,079 こんな感じですかね
86 00:05:30,079 --> 00:05:39,568 ヘッドじゃあ午後文字を入れちゃいましょう
87 00:05:33,129 --> 00:05:43,550 最前面にするのはさっきの右クリックの最襲ジュンヌ最善名
88 00:05:39,569 --> 00:05:47,160 これますしっえっとここに書いてあるのは
89 00:05:43,550 --> 00:05:52,400 ショートカットですショートカットをやると肌に早く
90 00:05:47,160 --> 00:05:55,220 コマンドシフトを弓カッコみたいなところでしょうかね
91 00:05:52,399 --> 00:05:59,609 はいでこれで
92 00:05:55,220 --> 00:06:01,030 ダブルクリックしていくと文字が編集できる
93 00:05:59,610 --> 00:06:03,180 なりますので
94 00:06:01,029 --> 00:06:05,399 制作
95 00:06:03,180 --> 00:06:08,569 g 0
96 00:06:05,399 --> 00:06:08,569 スキルハブ
97 00:06:10,029 --> 00:06:15,299 みたいな感じしておきましょうか
98 00:06:12,528 --> 00:06:21,149 スキルはずで
99 00:06:15,300 --> 00:06:24,170 でえっとここの文字をコピーして
100 00:06:21,149 --> 00:06:24,169 ペーストしたときましょう
101 00:06:28,560 --> 00:06:40,920 はいえーとじゃあこれできましたでここにぼ
102 00:06:33,480 --> 00:06:46,819 画像をはめ込んでいきますじゃあさっきの画像を横にでやりましたので
103 00:06:40,920 --> 00:06:46,819 平成はこれは apple 実績がこっちにしましょうかどばどちっちゃいですね
104 00:06:49,860 --> 00:06:57,189 まあ拡大縮小しましてアプリの制作実績は
105 00:06:54,968 --> 00:06:59,719 8この画像を使いましょう
106 00:06:57,189 --> 00:07:01,509 でこれはマスクをかけます
107 00:06:59,720 --> 00:07:03,590 最背面に
108 00:07:01,509 --> 00:07:08,209 1回してもらってですねー
109 00:07:03,589 --> 00:07:11,329 背面に送るかこの資格を全部最前面にしてもらって
110 00:07:08,209 --> 00:07:16,629 画像その杯目に送ってもらうと
111 00:07:11,329 --> 00:07:17,829 て二つの画像を選択してコマンドな直すと
112 00:07:16,629 --> 00:07:20,620 これで
113 00:07:17,829 --> 00:07:26,479 マスクがかかりましさっきの近くの形になっ
114 00:07:20,620 --> 00:07:29,100 まあなんとなくそんな感じが出てきましたよねあとはブログ記事のところには
115 00:07:26,480 --> 00:07:31,889 これですね
116 00:07:29,100 --> 00:07:38,069 はこれはえーっ等
117 00:07:31,889 --> 00:07:41,689 やっぱりこうてき頭の大きさしまして再早めに贈って一つ前にすると
118 00:07:38,069 --> 00:07:41,689 て二つ選択してコマンド7
119 00:07:42,230 --> 00:07:52,710 でちょっと動かしたいなーっていう時は
120 00:07:45,769 --> 00:07:56,699 なかなか身だけをね動かしたい時は白の選択するダイレクト選択ツールに持ち替えて
121 00:07:52,709 --> 00:08:00,409 一度何もないとクリックして改めてクリックすると
122 00:07:56,699 --> 00:08:00,409 そうすると中岳小動きます
123 00:08:02,408 --> 00:08:10,750 こんな感じでいいでしょうか
124 00:08:04,439 --> 00:08:13,779 はい画像が入るとですねまあそれらしくちょっとなってきましたよね
125 00:08:10,750 --> 00:08:20,009 ねえと色をつけていきましょう
126 00:08:13,779 --> 00:08:25,049 今回色の見本にするのは8私の場合は
127 00:08:20,009 --> 00:08:29,610 これでもともと作った自分が作ったものですけどこれをちょっと見方にしましょう
128 00:08:25,050 --> 00:08:32,879 コマンドシフトコントロール利用してここをコピーすると
129 00:08:29,610 --> 00:08:34,528 でここに貼り付けると v
130 00:08:32,879 --> 00:08:37,208 そうすると
131 00:08:34,528 --> 00:08:39,820 硬派れていたじゃないですかで
132 00:08:37,208 --> 00:08:45,319 9位ローマが支えたいと思う
133 00:08:39,820 --> 00:08:49,910 背景からの上ですよねちょっとヘッダーの部分を
134 00:08:45,320 --> 00:08:53,110 袋のやレッスンに持ち替えましてヘッダー部分をちょっとこう
135 00:08:49,909 --> 00:08:55,439 今回デザイン的に大きくして
136 00:08:53,110 --> 00:08:58,460 こんな感じでしょうかね
137 00:08:55,440 --> 00:09:04,070 でそこにはこの青色を入れたいと
138 00:08:58,460 --> 00:09:10,610 猫の資格が選択されている状況でスポイトツールを使います
139 00:09:04,070 --> 00:09:16,810 スポイトツールを使ってここ欲しい色をクリックするとこの色になってくれる
140 00:09:10,610 --> 00:09:18,940 ねえとロゴとが消えちゃいましたので再杯目にして一つ前面に送るという
141 00:09:16,809 --> 00:09:20,949 白にしましょう
142 00:09:18,940 --> 00:09:24,259 はいはい0になります
143 00:09:20,950 --> 00:09:27,259 でここのロゴデザインのところねー
144 00:09:24,259 --> 00:09:29,629 ここここはえっとちょっと
145 00:09:27,259 --> 00:09:31,669 4日線が太いですよね
146 00:09:29,629 --> 00:09:33,850 もう少し補足しまして
147 00:09:31,669 --> 00:09:35,419 中が白なんで
148 00:09:33,850 --> 00:09:38,190 白
149 00:09:35,419 --> 00:09:39,360 透明ずらしこれ
150 00:09:38,190 --> 00:09:42,240 うんうん
151 00:09:39,360 --> 00:09:46,350 でえっと9
152 00:09:42,240 --> 00:09:48,889 線の部分前の部分は白んします
153 00:09:46,350 --> 00:09:52,240 はい行いました
154 00:09:48,889 --> 00:09:54,600 ポンとロール6-コマンド前ですねー
155 00:09:52,240 --> 00:10:00,339 引きの絵にしていくと
156 00:09:54,600 --> 00:10:01,750 こういう感じでやってます文字はで全部漕代です
157 00:10:00,339 --> 00:10:05,610 はいはい
158 00:10:01,750 --> 00:10:05,610 ながらがいい感じになってきました
159 00:10:05,820 --> 00:10:13,528 てあとは a 8ここですね
160 00:10:09,929 --> 00:10:15,859 ここにまだ作ってなかったんですけれども
161 00:10:13,528 --> 00:10:19,789 ヘッド資格を
162 00:10:15,860 --> 00:10:23,600 作ってはグローバルナビゲーションの上にですね
163 00:10:19,789 --> 00:10:25,689 受注この人だけ頼みたいなぁと思ったとき
164 00:10:23,600 --> 00:10:30,250 連絡先がないと困るじゃないですか
165 00:10:25,690 --> 00:10:34,220 なのでその連絡先をずに上に出しておくことにしましょう
166 00:10:30,250 --> 00:10:37,759 ジャークはってその目立つようにですね作って
167 00:10:34,220 --> 00:10:41,250 少し色を変えます色は濃い青
168 00:10:37,759 --> 00:10:42,279 やっぱりスポイトツール持ってここらへんなをですね
169 00:10:41,250 --> 00:10:43,679 して
170 00:10:42,279 --> 00:10:47,039 で
171 00:10:43,679 --> 00:10:51,319 改めましてここに
172 00:10:47,039 --> 00:10:53,009 西文字をコピーしたんですけど最前面にして
173 00:10:51,320 --> 00:10:54,450 これでへ
174 00:10:53,009 --> 00:10:57,230 ネットじゃ
175 00:10:54,450 --> 00:10:59,769 電話
176 00:10:57,230 --> 00:11:01,899 もうちょっと大きくしましょうか
177 00:10:59,769 --> 00:11:07,570 電話
178 00:11:01,899 --> 00:11:11,730 03-000ダルのプロローグだろう0
179 00:11:07,570 --> 00:11:14,040 で次がメールですねー
180 00:11:11,730 --> 00:11:18,300 塩と a
181 00:11:14,039 --> 00:11:20,349 @ううう.
182 00:11:18,299 --> 00:11:24,149 今
183 00:11:20,350 --> 00:11:26,879 てな感じでこれ常に表示しておくようにしましょう
184 00:11:24,149 --> 00:11:28,730 右端で合わせて
185 00:11:26,879 --> 00:11:34,818 中路しておきましょうか
186 00:11:28,730 --> 00:11:39,200 でえっと後はですねまぁ細かい調整になってきますんで
187 00:11:34,818 --> 00:11:43,120 8もう少しがここに色つけたいなぁというときは
188 00:11:39,200 --> 00:11:46,750 どこ箇所があったりした場合は色を付けてですね
189 00:11:43,120 --> 00:11:49,879 エイトデザインを仕上げていってみてください
190 00:11:46,750 --> 00:11:52,089 今回例えばここね jquery で
191 00:11:49,879 --> 00:11:53,990 なんかここをクリックすると
192 00:11:52,089 --> 00:11:56,649 色フィーチャーが
193 00:11:53,990 --> 00:12:00,549 変えられるよと
194 00:11:56,649 --> 00:12:02,769 よくあるじゃないですかあのこのビッグイメージがねどんどん
195 00:12:00,549 --> 00:12:06,929 変わっていくような感じねぇ
196 00:12:02,769 --> 00:12:11,129 クリックすると次のなんかこうイメージが出てくると
197 00:12:06,929 --> 00:12:14,549 それを作りたいときはここに少しナビゲーションを作らないといけないんでこういう
198 00:12:11,129 --> 00:12:17,049 ふうにナビゲーションをつくったりね
199 00:12:14,549 --> 00:12:17,979 越冬こんな感じか知る
200 00:12:17,049 --> 00:12:21,000 えっ
201 00:12:17,980 --> 00:12:21,000 って白にして
202 00:12:22,389 --> 00:12:27,938 白をクリックして
203 00:12:25,570 --> 00:12:31,629 8まあ
204 00:12:27,938 --> 00:12:35,500 どうでしょうかいかがだったでしょうかねなんとなく
205 00:12:31,629 --> 00:12:40,450 感じはつかめていただいたんじゃないかなと思います
206 00:12:35,500 --> 00:12:41,620 まあここで越冬を覚えてもらいたいことというのは画像というか画像ですねヨイショ
207 00:12:40,450 --> 00:12:47,620 待って
208 00:12:41,620 --> 00:12:51,620 で貼り付けてマスクするということとあとは8色ですね
209 00:12:47,620 --> 00:12:55,409 産後こんな色にしたいものがしたよっていうのがあればそれを
210 00:12:51,620 --> 00:12:59,490 コピーしてここに持ってきてスポイトツールで
211 00:12:55,409 --> 00:13:03,429 クリックしてですねその色を適用してみるということ
212 00:12:59,490 --> 00:13:09,519 そうすると何となくそれっぽいのができてきますんで
213 00:13:03,429 --> 00:13:15,879 今あの子のようにして第一階層ね作っていただいたんですけどもトップページですよね
214 00:13:09,519 --> 00:13:17,058 これから皆さんは第2回村デザインと第3階層のデザイン
215 00:13:15,879 --> 00:13:20,389 この
216 00:13:17,058 --> 00:13:22,750 3つのデザインをしてください
217 00:13:20,389 --> 00:13:27,180 で8
218 00:13:22,750 --> 00:13:34,049 今日行ったテクニックを生かして3ページ作る
219 00:13:27,179 --> 00:13:36,088 この三平さんにできればあとはねえとコーディングの時に必要な画像を切り出すという
220 00:13:34,049 --> 00:13:41,490 作業ができますんで
221 00:13:36,089 --> 00:13:46,330 切り出してですね練習に組み上げるということが初めてできるようになりますのでこの
222 00:13:41,490 --> 00:13:49,299 3階層だけはまず作っておいてください
223 00:13:46,330 --> 00:13:51,379 では8さん回数をつくったらですね
224 00:13:49,299 --> 00:13:56,259 必ず保存して
225 00:13:51,379 --> 00:13:57,420 なくならないところに取っておくということもお忘れなく
226 00:13:56,259 --> 00:13:59,009 ではええええ
227 00:13:57,419 --> 00:14:02,459 次回ですね
228 00:13:59,009 --> 00:14:05,600 また今度はコーディングなるのかなお会いしましょう
229 00:14:02,460 --> 00:14:05,600 どうもお疲れ様でした