WEBVTT

00:00:00.500 --> 00:00:08.500
はい、今回はノンデザイナーのためのウェブデザイン入門ということで、こちらの映像を通して解説を進めていきたいと思います。

00:00:08.500 --> 00:00:24.260
ウェブデザイナーでなくてもデザインができるポイントということで、一つ目がこちらの画像素材サイトを利用するといったポイントになります。

00:00:24.260 --> 00:00:27.260
こちら順を追って解説していきます。

00:00:28.260 --> 00:00:44.590
こういったサイトなんですが、こういった画像素材サイトを利用してもらうと、これ無料でダウンロードできるんですが、高品質な画像がダウンロードすることができます。

00:00:44.590 --> 00:00:54.590
なので、もちろん画像、写真とかあったほうがいいんですが、ない場合はこちらの素材を使って配置することができます。

00:00:54.590 --> 00:01:04.590
詳しくは順を追って解説していくんですが、あとは二つ目のポイントということで、ウェブツールを使うということになります。

00:01:04.590 --> 00:01:11.590
こういったペライチというのが最近だと有名だと思うので、こちらを使用して解説をしていくのですが、

00:01:11.590 --> 00:01:17.590
こちらのペライチを使うことで、マウスのクリックだけでページを作成できてしまうといった、

00:01:17.590 --> 00:01:26.590
簡易的なツールがたくさんあるので、それを使っていただくと、ウェブデザイナーでなくてもデザインができてしまうということになります。

00:01:26.590 --> 00:01:33.590
あとは、この同じツールを使っているモデルを見つけるということです。

00:01:33.590 --> 00:01:48.700
こちら、メンタリストだいごさんのページなんですが、これも同じペライチを使って作成をしています。

00:01:48.700 --> 00:01:59.020
なので、これを真似、だいたいでいいんですが、完璧に真似しなくてもいいんですが、これを参考につつ作成していただければ、

00:01:59.020 --> 00:02:06.780
一から自分で考えて作らずにページを作成できるということになります。

00:02:06.780 --> 00:02:13.560
といった三つのポイントをこれから解説していきたいと思います。

00:02:13.560 --> 00:02:22.560
ではまず、画像素材サイトなんですが、こういったおすすめのものを紹介していきたいと思います。

00:02:22.560 --> 00:02:40.190
まず、先ほど開いた無料で高品質な画像がダウンロードできるPixabayというサイトになります。

00:02:40.190 --> 00:02:52.900
これで何でもいいんですが、キーワードを打ち込むと、そのキーワードに応じた画像がこのように出てきます。

00:02:52.900 --> 00:02:59.900
海外のサイトなので、おしゃれな高品質な画像が無料でダウンロードできます。

00:03:00.900 --> 00:03:09.700
1点だけ商用利用無料付属表示は必要ありません。

00:03:09.700 --> 00:03:13.700
こちらを確認していただいて無料ダウンロードをクリックしてください。

00:03:13.700 --> 00:03:25.510
あとはこの私はロボットではありませんというのをチェックをしていただいて、このダウンロードをクリックするだけです。

00:03:25.510 --> 00:03:30.510
これで自分のパソコンに画像をダウンロードすることができます。

00:03:30.510 --> 00:03:35.080
これがPixabayです。

00:03:35.080 --> 00:03:43.080
こういった画像素材サイトをいくつかブックマークしておくと大変便利なのでご紹介しています。

00:03:43.080 --> 00:03:46.080
続いてこのイラスト屋です。

00:03:46.080 --> 00:03:59.280
こちら、こういったイラストレーターさんが作ってくださっているイラストをダウンロードすることができます。

00:04:00.280 --> 00:04:10.280
こういった感じでクリックしていただいて、画面を右クリック、名前を付けて画像を保存。

00:04:10.280 --> 00:04:17.000
こちらをクリックしていただくとダウンロードすることができます。

00:04:17.000 --> 00:04:34.680
見つけ方なんですが、このようなイラスト屋と検索していただくとだいたい一番上に出てきますので検索して見つけてください。

00:04:34.680 --> 00:04:55.640
あとPixabayはこのように検索をしていただくと一番上に来ます。

00:04:55.640 --> 00:05:07.900
なのでこの画像素材サイトの名前を覚えていただいて検索をしていただくと一発で見つかるかと思います。

00:05:07.900 --> 00:05:17.900
続いてアイコン素材をダウンロードできるアイコンモノというサイトがあります。

00:05:17.900 --> 00:05:23.900
このサイトのサイト名を検索していただいて見つけてください。

00:05:23.900 --> 00:05:30.680
こういったアイコン素材をダウンロードすることができます。

00:05:30.680 --> 00:05:37.310
このようにクリックしていただいて、サイズを選択。

00:05:37.310 --> 00:05:51.310
カラーをこのように数値で入力していただいて、Ping、JPEG、SVGといった形で必要に応じて選択をしてください。

00:05:51.310 --> 00:06:03.040
Pingかなと思うのでPingを選択していただいてダウンロードしてください。

00:06:03.040 --> 00:06:09.530
こういった形で色も選択できます。

00:06:09.530 --> 00:06:19.530
このようにRGBコードを入力していただくとまたここで調整していただくと色が変更できますので、

00:06:19.530 --> 00:06:27.530
このプレビューを見てこれで良ければこちらのファイル形式を選択してダウンロードしてください。

00:06:27.530 --> 00:06:36.530
こういった形で素材サイトを活用して素人っぽくないものがたくさんあります。

00:06:36.530 --> 00:06:48.530
そういう素材を用意してそれをプライチの方に配置していくといったのが良いのではないかなと思います。

00:06:48.530 --> 00:07:05.530
こういった素材を見つけるのに対してブロガーなどが紹介している素材サイトのまとめ記事を見ていただくと

00:07:05.530 --> 00:07:17.530
良いサイトを紹介してくるのでそれを参考にしてご自身でブックマークしておくといった感じでストックしておくと

00:07:17.530 --> 00:07:21.530
ページの作成の際にすぐ使えるかと思います。

00:07:21.530 --> 00:07:34.820
これWebページじゃなくてもセミナーのスライドとかそういったものに使えますのでぜひ活用してみてください。

00:07:34.820 --> 00:07:39.820
これフリーアイコンなんですが他にも画像素材サイトまとめなど色々ありますので

00:07:39.820 --> 00:07:47.900
そちらもぜひ調べてみてたくさんあるのでそこを参考にしてください。

00:07:48.900 --> 00:08:03.330
続いてなんですがペライティの使い方ということで解説をしていきたいんですが

00:08:03.330 --> 00:08:13.830
まずはこちらの新しいページを作成するこちらをクリックしてください。

00:08:13.830 --> 00:08:17.830
このテンプレートを使うこちらをクリックしてください。

00:08:17.830 --> 00:08:23.980
今すぐ編集を始めるこちらをクリック。

00:08:23.980 --> 00:08:28.980
こういった形で編集画面に進みます。

00:08:29.980 --> 00:08:35.740
こちらの部分を変えた目にしてください。

00:08:39.740 --> 00:08:43.740
こちらをモデルにどんどん作成していこうかなと思います。

00:08:43.740 --> 00:08:50.430
まずヘッダー画像こちらを作成していきたいと思いますので

00:08:50.430 --> 00:09:00.640
ヘッダー画像の作成なんですがこちらのPixel Editorを使ってやっていきたいと思います。

00:09:06.150 --> 00:09:13.150
こちらのPixel Editorをどうやって見つけるのかといいますと

00:09:17.150 --> 00:09:24.060
検索をしてください。

00:09:24.060 --> 00:09:30.060
こちらのオンラインフォトエディターをクリックしてください。

00:09:30.060 --> 00:09:35.950
これでPixel Editorの画面に進みます。

00:09:36.950 --> 00:09:43.260
これでまずはこういったヘッダー画像を作成していきましょう。

00:09:43.260 --> 00:09:49.090
まずこの新しい画像を作成こちらをクリックしてください。

00:09:49.090 --> 00:10:06.900
この画像のサイズなんですが幅が2500で高さが1875

00:10:06.900 --> 00:10:14.500
こちらのサイズで画像を作成してください。

00:10:14.500 --> 00:10:20.820
これが編集画面になります。

00:10:20.820 --> 00:10:25.820
ではまずこちらの背景がロックがかかってしまったので

00:10:25.820 --> 00:11:03.160
こちらを2回クリックしていただいてロックを外してください。

00:11:03.160 --> 00:11:10.180
では続いてこういった形でナビゲーターちょっと使いづらいんですが

00:11:10.180 --> 00:11:22.180
ここをいじっていただいて背景全体が見えるように調整してみてください。

00:11:22.180 --> 00:11:27.620
このナビゲーターをズームインかズームアウトしていただくと

00:11:27.620 --> 00:11:30.620
このように全体が見えるようになります。

00:11:30.620 --> 00:11:37.440
ちょっと使いづらいんですがここを全身見えるようにしていただいて

00:11:37.440 --> 00:11:42.840
編集を始めていきましょう。

00:11:42.840 --> 00:11:48.840
まず元となる画像を用意していただきたいと思います。

00:11:48.840 --> 00:12:02.230
画像なんですがこういった誰かに撮ってもらった写真などを使っていきましょう。

00:12:02.230 --> 00:12:06.230
こういった形で完成権がこちらになります。

00:12:06.230 --> 00:12:11.060
こういった形で作成していきたいと思います。

00:12:11.060 --> 00:12:16.060
もし画像がない場合は先ほどの画像素材サイトですとか

00:12:16.060 --> 00:12:19.060
そういったもので見つけてきていただければなと思います。

00:12:19.060 --> 00:12:28.160
ではまずこちらのメニューから画像をレイヤーとして開く

00:12:28.160 --> 00:12:31.160
こちらをクリックしてください。

00:12:31.160 --> 00:12:35.160
先ほどの素材を選択して開く。

00:12:35.160 --> 00:12:39.860
ちょっと重たいので時間がかかるんですが

00:12:39.860 --> 00:12:44.860
このように画像を配置できます。

00:12:44.860 --> 00:12:48.860
このままだとサイズが微妙なので

00:12:48.860 --> 00:12:55.860
編集から自由変形をクリックしてください。

00:12:55.860 --> 00:12:58.860
必ずこのサイズを変更する場合は

00:12:58.860 --> 00:13:07.490
パソコンのシフトキーをクリックした状態で大きさを変更してください。

00:13:07.490 --> 00:13:10.490
シフトキーを押さないと

00:13:10.490 --> 00:13:13.490
縦横比というものがあるんですけど

00:13:13.490 --> 00:13:16.490
縦と横の比率が狂ってしまって

00:13:16.490 --> 00:13:20.490
画像が歪んでしまうので必ずシフトキーを押しながら

00:13:20.490 --> 00:13:25.820
大きさを変更してください。

00:13:25.820 --> 00:13:42.190
これでエンターです。

00:13:42.190 --> 00:14:03.790
もう一度やります。

00:14:03.790 --> 00:14:06.790
この変更を適用しますかを

00:14:06.790 --> 00:14:11.790
これで

00:14:11.790 --> 00:14:22.650
切れてしまったのでもう一回やります。

00:14:22.650 --> 00:14:45.660
画像をレイアウトして開く。

00:14:45.660 --> 00:14:49.660
先ほど切れてしまったのでもう一回やります。

00:14:49.660 --> 00:15:02.500
こういった形で調整してください。

00:15:02.500 --> 00:15:11.900
このレイヤーについて軽く説明しようと思うんですけど

00:15:11.900 --> 00:15:17.900
これが下地の白の背景色になります。

00:15:17.900 --> 00:15:21.900
その上にこれは余計なものなので消してしまうんですが

00:15:21.900 --> 00:15:23.900
また上のレイヤーがあって

00:15:23.900 --> 00:15:27.900
背景の上にこの写真があるといった形になります。

00:15:27.900 --> 00:15:31.900
今度上に行くたびに

00:15:31.900 --> 00:15:34.900
正面に表示されるといった形になります。

00:15:34.900 --> 00:15:43.140
ではまず完成形がこういったものなので

00:15:43.140 --> 00:15:50.510
黒い四角形を配置して不透明度を下げてみたいと思います。

00:15:50.510 --> 00:15:55.510
そちらに関してはこの描画ツールをクリックしてください。

00:15:55.510 --> 00:16:00.850
四角形になっているのでこのまま

00:16:00.850 --> 00:16:07.850
新しいレイヤーをクリックしていただいて

00:16:07.850 --> 00:16:15.850
この状態で描画ツールで四角形をこのように作成してください。

00:16:15.850 --> 00:16:18.850
この黒い四角形を作成できましたら

00:16:18.850 --> 00:16:22.220
こちらをクリックしてください。

00:16:22.220 --> 00:16:24.220
少し見づらいんですがこちらです。

00:16:24.220 --> 00:16:30.660
こちらをクリックして不透明度を50%くらいにしてください。

00:16:30.660 --> 00:16:43.490
不透明度を下げていただいたら

00:16:43.490 --> 00:16:48.490
もう一度クリックして元の画面に戻してください。

00:16:49.490 --> 00:16:55.630
続いてテキストを打ち込んでみたいと思います。

00:16:55.630 --> 00:16:57.630
こういった形です。

00:16:57.630 --> 00:16:59.630
このテキストの配置なんですが

00:16:59.630 --> 00:17:04.630
ちなみにこういった右上に配置していると

00:17:04.630 --> 00:17:06.630
第5才の場合右上に配置しているので

00:17:06.630 --> 00:17:10.630
それを参考に作成しました。

00:17:10.630 --> 00:17:12.630
完璧に同じな画像でなくても

00:17:12.630 --> 00:17:14.630
この配置とかテキストの位置とか

00:17:14.630 --> 00:17:24.550
そういったものを参考にしていただければなと思います。

00:17:24.550 --> 00:17:26.550
テキストなんですがこのType2ですね。

00:17:26.550 --> 00:17:28.550
こちらをクリックしてください。

00:17:28.550 --> 00:17:32.550
Type2の場合新しくレイヤーを作らなくても

00:17:32.550 --> 00:17:36.550
勝手に自動でこのレイヤーができるので

00:17:36.550 --> 00:17:39.550
この新しいレイヤーを作る作業は必要ありません。

00:17:39.550 --> 00:17:41.550
このテキストのところに

00:17:41.550 --> 00:17:49.260
こういった形によく入れていただいたあと

00:17:49.260 --> 00:17:51.260
フォントレット、フォントは

00:17:51.260 --> 00:18:01.070
今回はユーゴシックにしてみたいと思います。

00:18:01.070 --> 00:18:07.940
色なんですが黄色にしたいので

00:18:08.940 --> 00:18:16.150
FF、FF、FFと入力します。

00:18:16.150 --> 00:18:22.260
サイズもこちらで調整してください。

00:18:22.260 --> 00:18:29.020
こういった形でテキストを配置します。

00:18:29.020 --> 00:18:48.790
続いて社名のこの早を入力したいと思います。

00:18:48.790 --> 00:18:52.790
サイズなんですがこうやって調整します。

00:18:52.790 --> 00:18:57.510
OKです。

00:18:57.510 --> 00:19:03.210
これでこういった形で配置をします。

00:19:03.210 --> 00:19:06.210
これでちょっとシンプルなものなんですが

00:19:06.210 --> 00:19:10.650
ヘッダー画像を作成しました。

00:19:10.650 --> 00:19:18.260
最後にファイルから保存。

00:19:18.260 --> 00:19:22.260
フォーマットがJPEGになっているのでこちらですね。

00:19:22.260 --> 00:19:28.260
写真の場合はこのJPEGというファイル形式にしてください。

00:19:28.260 --> 00:19:31.260
こちらに書いてある通りほとんどの写真に適しています

00:19:31.260 --> 00:19:35.260
という風になっているのでJPEGを選択してください。

00:19:35.260 --> 00:19:43.410
JPEGはこちら。一番最大まで上げてしまって問題ないです。

00:19:43.410 --> 00:19:51.300
こちらでOKをクリックしてください。

00:19:51.300 --> 00:19:59.150
ファイル名を入力していただいて保存です。

00:19:59.150 --> 00:20:06.230
これでちょっと簡単なものなんですが

00:20:06.230 --> 00:20:14.340
画像の方作成できました。

00:20:14.340 --> 00:20:16.340
これでヘッダー画像の方作成できたので

00:20:16.340 --> 00:20:19.340
これを配置してみたいと思います。

00:20:19.340 --> 00:20:29.340
画像横幅フルサイズを選択して決定をしてください。

00:20:29.340 --> 00:20:39.170
編集から画像を選択。

00:20:39.170 --> 00:20:43.170
こういった形で画像を設定できました。

00:20:43.170 --> 00:20:47.170
ちょっと画面が若干おかしくなっているので

00:20:47.170 --> 00:20:54.400
保存をして一旦トップページに戻ります。

00:20:54.400 --> 00:21:10.250
これでヘッダー画像を配置することができました。

00:21:10.250 --> 00:21:16.250
こういった形でPixel Editorで文字を入れる程度でしたら

00:21:16.250 --> 00:21:22.250
簡単に作成できるのでぜひやってみてください。

00:21:22.250 --> 00:21:29.330
あとはこういったモデルを見つけて作成していくんですが

00:21:29.330 --> 00:21:31.330
その場合完璧に似せなくても

00:21:31.330 --> 00:21:35.330
こういった大体の配置とかを参考に

00:21:35.330 --> 00:21:40.330
ご自身で作成していくという形になります。

00:21:40.330 --> 00:21:45.330
例えばこういったプロフィールに飛ばすボタンですね。

00:21:45.330 --> 00:21:47.330
こちらをちょっと作成して

00:21:47.330 --> 00:21:49.330
真似して作成してみますと

00:21:49.330 --> 00:21:51.330
おそらくになってしまうんですけど

00:21:51.330 --> 00:22:01.880
こういった素材を使っているのかなと思いますが

00:22:05.880 --> 00:22:26.980
こちらにリンクのURLですね。

00:22:26.980 --> 00:22:28.980
ボタンを押した先の飛び先のページですね。

00:22:28.980 --> 00:22:30.980
別ウィンドウにしますと

00:22:30.980 --> 00:22:36.740
こういった別タブでページが開くようになります。

00:22:36.740 --> 00:22:40.740
こういった形で設定をしてください。

00:22:40.740 --> 00:22:42.740
若干ちょっと文字がデカいんですが

00:22:42.740 --> 00:22:48.120
こちらはこのように調整してください。

00:22:48.120 --> 00:22:56.590
こちらも完璧に似せる必要はないので

00:22:56.590 --> 00:23:21.120
変えた概要を載せてみてください。

00:23:21.120 --> 00:23:27.120
こういった形で配置を参考に作成することができます。

00:23:27.120 --> 00:23:31.120
あとはこちらの問い合わせとか

00:23:31.120 --> 00:23:33.120
こういったものが必要になるかと思うので

00:23:33.120 --> 00:23:38.880
こちらをこのページを参考に作成します。

00:23:38.880 --> 00:23:44.880
こちらもこのパーツのバー見出しというものを

00:23:44.880 --> 00:23:50.880
使っていますのでそれを選択します。

00:23:50.880 --> 00:23:52.880
こちら見ていただくと

00:23:52.880 --> 00:23:56.880
このポイントの部分消しているのが

00:23:56.880 --> 00:23:58.880
わかるかと思うので

00:23:58.880 --> 00:24:02.880
このポイントの部分を消します。

00:24:02.880 --> 00:24:07.880
見出しの席と問い合わせ

00:24:07.880 --> 00:24:14.600
中央に配置しているので中央揃え

00:24:14.600 --> 00:24:20.100
フォントサイズは大体でいいんですけど

00:24:20.100 --> 00:24:22.100
これぐらいかと思います。

00:24:22.100 --> 00:24:24.100
保存です。

00:24:24.100 --> 00:24:28.100
ちょっと小さいんですがこういった形で

00:24:28.100 --> 00:24:38.150
微調整しつつ見せていければと思います。

00:24:38.150 --> 00:24:40.150
こちらのテキストですね。

00:24:40.150 --> 00:24:50.260
こちらはこういった形で参考にせず

00:24:50.260 --> 00:24:58.010
メッセージを参考にせず入力をしてください。

00:24:58.010 --> 00:25:06.350
リンクの作成方法なんですが

00:25:06.350 --> 00:25:10.350
こういったテキストを選択

00:25:10.350 --> 00:25:14.350
こちらのリンクの挿入を選択してください。

00:25:14.350 --> 00:25:18.350
飛び先のページのURL

00:25:18.350 --> 00:25:21.350
こちらを入力してください。

00:25:21.350 --> 00:25:25.350
この新規ウィンドウにしますと

00:25:25.350 --> 00:25:28.350
新規ウィンドウじゃなくてもいいかなと思うので

00:25:28.350 --> 00:25:31.350
無しでOKです。

00:25:31.350 --> 00:25:34.350
これ設定自体はしていないので

00:25:34.350 --> 00:25:37.350
リンクになっていないんですが

00:25:37.350 --> 00:25:41.350
こういったリンクの挿入を設定していただくと

00:25:41.350 --> 00:25:46.940
こういったリンクが作成できます。

00:25:46.940 --> 00:25:49.940
テキストを選択してリンクの挿入できます。

00:25:49.940 --> 00:25:53.940
こういった感じでこちらのモデルを参考にせず

00:25:53.940 --> 00:25:57.940
作成ができるということになります。

00:25:57.940 --> 00:25:59.940
これは保存です。

00:25:59.940 --> 00:26:15.920
フォントサイズも大きめにして保存です。

00:26:15.920 --> 00:26:19.920
こういった形で真似しつつ作成していきたいと思うのですが

00:26:21.920 --> 00:26:25.920
このプロジェクトの箇所も先ほどの要素ですね

00:26:25.920 --> 00:26:30.320
パーツからバーミラー

00:26:30.320 --> 00:26:34.320
これも完璧に似せる必要はないので

00:26:34.320 --> 00:26:57.350
こういった形で商品サービスで入力をしてください。

00:26:57.350 --> 00:27:05.880
あとはこちらに商品サービスの概要とか説明とか

00:27:05.880 --> 00:27:24.940
で保存ですね。

00:27:24.940 --> 00:27:32.790
あとはこういった画像など配置していただければなと思います。

00:27:33.790 --> 00:27:37.790
こちらについてはこちらの要素は

00:27:37.790 --> 00:27:45.640
ブロックの投入から上画像一列

00:27:45.640 --> 00:27:48.640
これを使用していると思うので

00:27:48.640 --> 00:27:53.640
こういった形で同じものを選択します。

00:27:53.640 --> 00:27:59.680
こちらで線を引いているので

00:27:59.680 --> 00:28:07.640
こちらの下線を

00:28:07.640 --> 00:28:13.270
みなしなべ、太地、保存

00:28:13.270 --> 00:28:19.270
こういった形で編集をしていきます。

00:28:19.270 --> 00:28:32.370
こういった形で画像、イメージ画像を配置します。

00:28:32.370 --> 00:28:36.370
この編集を押していただいて

00:28:36.370 --> 00:28:39.370
画像を選択してアップロード

00:28:39.370 --> 00:28:44.370
これでこういった先ほどの画像素材サイトのものを

00:28:44.370 --> 00:28:47.370
選択して開くんですね。

00:28:47.370 --> 00:28:51.370
もちろんこういった独自の画像がある場合は

00:28:51.370 --> 00:28:54.370
そちらを当てはめてください。

00:28:54.370 --> 00:28:59.190
こういった形で少しデカいんですが

00:28:59.190 --> 00:29:02.890
配置をします。

00:29:02.890 --> 00:29:18.460
この身段中身の位置がいらないので切ってください。

00:29:18.460 --> 00:29:27.550
こういった形で入力をします。

00:29:27.550 --> 00:29:43.420
あとは先ほどの

00:29:43.420 --> 00:29:46.420
ブロックの挿入の上画像

00:29:46.420 --> 00:29:49.420
1列を使っていただくと

00:29:49.420 --> 00:29:53.420
こういった講演中の様子なども作成できます。

00:29:53.420 --> 00:30:05.670
この場合このボタンがいらないので消してください。

00:30:05.670 --> 00:30:20.670
身段中の位置もいらないので消します。

00:30:20.670 --> 00:30:30.870
こんな感じでこちらにセミナーの様子など

00:30:30.870 --> 00:30:33.870
写真を載せていただくと

00:30:33.870 --> 00:30:35.870
こういった形で作成ができます。

00:30:35.870 --> 00:31:03.430
あとはまたこのお問い合わせの項目だったり

00:31:04.430 --> 00:31:09.430
こういったサービスなどがあったら紹介するといった形で

00:31:09.430 --> 00:31:13.430
どんどん配置していくといった形になります。

00:31:13.430 --> 00:31:19.430
あとは自分が出している書籍などがありましたら

00:31:19.430 --> 00:31:22.430
紹介していただくといったものになります。

00:31:22.430 --> 00:31:27.430
これは先ほどのパーツバー見出し

00:31:27.430 --> 00:31:36.620
このテキストのブロックいらないので削除してください。

00:31:42.900 --> 00:32:02.920
こういった形で見出しを作成します。

00:32:02.920 --> 00:32:14.050
画像なんですがこちらはおそらくこれを使っているかなと思うので

00:32:14.050 --> 00:32:18.050
上画像1列ですね。上画像2列ですね。

00:32:18.050 --> 00:32:21.050
こちらを選択してください。

00:32:21.050 --> 00:32:25.050
見出しいらないので消していただいて

00:32:32.540 --> 00:32:36.540
こういった形で画像を読むのみにしてください。

00:32:36.540 --> 00:32:42.300
これでどんどん配置できるかなと思います。

00:32:42.300 --> 00:32:46.300
最後にこういった書籍の一覧ページ

00:32:46.300 --> 00:32:50.300
こちらの誘導するボタンを配置してください。

00:32:50.300 --> 00:32:55.300
ボタンフォームからボタン拡大ですね。

00:32:55.300 --> 00:33:03.300
こちらを選択してください。

00:33:03.300 --> 00:33:13.070
こういった形であとはURL

00:33:13.070 --> 00:33:20.280
実際のこういったページに飛ばしているのか見てみますと

00:33:20.280 --> 00:33:26.550
プライズで作った別ページに飛ばしています。

00:33:26.550 --> 00:33:32.550
こういった形でこちらに紹介しきれなかった書籍などを

00:33:32.550 --> 00:33:36.550
また別のプライズで作ったページに飛ばすといったことも

00:33:36.550 --> 00:33:41.550
参考になりますのでこういった形でモデルを見つけて

00:33:41.550 --> 00:33:51.020
参考にしつつ作成をしていってください。

00:33:51.020 --> 00:33:55.020
あとこういったTwitterなどがあったらTwitterですね。

00:33:55.020 --> 00:34:08.670
おそらくこれはTwitterも読み出しから作成していこうかなと思います。

00:34:08.670 --> 00:34:21.450
これはTwitterに関しては特になくてもいいかなと思うんですが

00:34:21.450 --> 00:34:27.450
どういう風にやっているのかといいますと

00:34:27.450 --> 00:34:39.750
多分これはHTMLの要素を使っていると思いますので

00:34:39.750 --> 00:34:43.750
これプレミアムプランじゃないと使えないので

00:34:43.750 --> 00:34:49.750
このTwitterを入れたい場合はプレミアムプランに加入してください。

00:34:49.750 --> 00:34:55.750
こういった形で特に入れたい人はこの要素を入れてみてください。

00:34:55.750 --> 00:34:59.750
Twitterの埋め込みについてはWeb上にたくさん情報がありますので

00:34:59.750 --> 00:35:02.750
そちらを参考に配置してみてください。

00:35:02.750 --> 00:35:05.750
最後にこのメールマガジンですね。

00:35:05.750 --> 00:35:21.150
メールマガジンの項目を作成してみたいと思います。

00:35:21.150 --> 00:35:26.150
15ドルの28ですね。

00:35:26.150 --> 00:35:31.490
メールマガジン。

00:35:31.490 --> 00:35:34.490
テキスト要素を削除。

00:35:34.490 --> 00:35:38.490
これについてもおそらくブロックの挿入から

00:35:38.490 --> 00:35:41.490
こちらの要素ですね。

00:35:41.490 --> 00:35:45.490
上画像1列で決定です。

00:35:45.490 --> 00:35:51.490
この見出しはいらないので消してしまってください。

00:35:51.490 --> 00:35:56.490
このようにアイコンを使っていますので

00:35:56.490 --> 00:36:04.250
先ほどのアイコンものの素材を利用しましょう。

00:36:04.250 --> 00:36:07.250
これちょっと関係なさすぎるので

00:36:07.250 --> 00:36:17.080
先ほどのアイコンものからメールマガジンに関連するものをダウンロードしましょう。

00:36:17.080 --> 00:36:22.080
メールマガジンとこの検索窓に入力しますと

00:36:22.080 --> 00:36:26.650
関連するものが出てきます。

00:36:26.650 --> 00:36:33.390
メールマガジンだとなかったので

00:36:33.390 --> 00:36:38.390
こういった形でメールのアイコンが出てきますので

00:36:38.390 --> 00:36:45.710
そちらを選択してください。

00:36:45.710 --> 00:36:50.110
このピングでダウンロードしました。

00:36:50.110 --> 00:36:55.110
こちらの編集から画像を選択してアップロード

00:36:55.110 --> 00:37:01.540
メールのアイコンを選択で開く

00:37:01.540 --> 00:37:11.150
これで同じようにメールのアイコンを表示させることができました。

00:37:11.150 --> 00:37:18.150
この注意なしを削除

00:37:18.150 --> 00:37:33.040
あとはどういった内容を配信しますよといった形で入力をします。

00:37:37.530 --> 00:37:52.230
こういった形で入力をします。

00:37:52.230 --> 00:38:01.600
ボタンを削除

00:38:01.600 --> 00:38:09.100
こういった形でモデルを参考にしつつ作成していくと

00:38:09.100 --> 00:38:11.100
自分で一から作るよりは

00:38:11.100 --> 00:38:15.100
クオリティが強くならずに作成することができます。

00:38:15.100 --> 00:38:20.100
あとこういった要素の配置の方法などが

00:38:20.100 --> 00:38:25.100
モデルがあると自分で考えずに配置できるので

00:38:25.100 --> 00:38:28.100
ぜひこういった形でモデルを見つけてから

00:38:28.100 --> 00:38:33.250
ウェブページを作成してみてください。

00:38:33.250 --> 00:38:35.250
あとはこのヘッダー画像ですね。

00:38:35.250 --> 00:38:39.250
こちらも全く同じで作成するのは難しいんですが

00:38:39.250 --> 00:38:46.250
文字の配列とかそういったものを参考にして作成しつつ

00:38:46.250 --> 00:38:49.250
あとはこういった画像素材サイトから画像を持ってきて

00:38:49.250 --> 00:38:52.620
画像配置して

00:38:52.620 --> 00:38:58.620
またアイコンなども活用してみて

00:38:58.620 --> 00:39:04.260
このウェブページを作成してみてください。

00:39:04.260 --> 00:39:07.260
こういった形でノンデザイナーのための

00:39:07.260 --> 00:39:14.340
ウェブデザイン入門ということで開設しました。

00:39:14.340 --> 00:39:17.340
今回の内容は以上になります。