00:00
はい、今回はノンデザイナーのためのウェブデザイン入門ということで、こちらの映像を通して解説を進めていきたいと思います。
ウェブデザイナーでなくてもデザインができるポイントということで、一つ目がこちらの画像素材サイトを利用するといったポイントになります。
こちら順を追って解説していきます。
こういったサイトなんですが、こういった画像素材サイトを利用してもらうと、これ無料でダウンロードできるんですが、高品質な画像がダウンロードすることができます。
なので、もちろん画像、写真とかあったほうがいいんですが、ない場合はこちらの素材を使って配置することができます。
詳しくは順を追って解説していくんですが、あとは二つ目のポイントということで、ウェブツールを使うということになります。
こういったペライチというのが最近だと有名だと思うので、こちらを使用して解説をしていくのですが、
こちらのペライチを使うことで、マウスのクリックだけでページを作成できてしまうといった、
簡易的なツールがたくさんあるので、それを使っていただくと、ウェブデザイナーでなくてもデザインができてしまうということになります。
あとは、この同じツールを使っているモデルを見つけるということです。
こちら、メンタリストだいごさんのページなんですが、これも同じペライチを使って作成をしています。
なので、これを真似、だいたいでいいんですが、完璧に真似しなくてもいいんですが、これを参考につつ作成していただければ、
一から自分で考えて作らずにページを作成できるということになります。
といった三つのポイントをこれから解説していきたいと思います。
ではまず、画像素材サイトなんですが、こういったおすすめのものを紹介していきたいと思います。
まず、先ほど開いた無料で高品質な画像がダウンロードできるPixabayというサイトになります。
これで何でもいいんですが、キーワードを打ち込むと、そのキーワードに応じた画像がこのように出てきます。
海外のサイトなので、おしゃれな高品質な画像が無料でダウンロードできます。
03:00
1点だけ商用利用無料付属表示は必要ありません。
こちらを確認していただいて無料ダウンロードをクリックしてください。
あとはこの私はロボットではありませんというのをチェックをしていただいて、このダウンロードをクリックするだけです。
これで自分のパソコンに画像をダウンロードすることができます。
これがPixabayです。
こういった画像素材サイトをいくつかブックマークしておくと大変便利なのでご紹介しています。
続いてこのイラスト屋です。
こちら、こういったイラストレーターさんが作ってくださっているイラストをダウンロードすることができます。
こういった感じでクリックしていただいて、画面を右クリック、名前を付けて画像を保存。
こちらをクリックしていただくとダウンロードすることができます。
見つけ方なんですが、このようなイラスト屋と検索していただくとだいたい一番上に出てきますので検索して見つけてください。
あとPixabayはこのように検索をしていただくと一番上に来ます。
なのでこの画像素材サイトの名前を覚えていただいて検索をしていただくと一発で見つかるかと思います。
続いてアイコン素材をダウンロードできるアイコンモノというサイトがあります。
このサイトのサイト名を検索していただいて見つけてください。
こういったアイコン素材をダウンロードすることができます。
このようにクリックしていただいて、サイズを選択。
カラーをこのように数値で入力していただいて、Ping、JPEG、SVGといった形で必要に応じて選択をしてください。
Pingかなと思うのでPingを選択していただいてダウンロードしてください。
06:03
こういった形で色も選択できます。
このようにRGBコードを入力していただくとまたここで調整していただくと色が変更できますので、
このプレビューを見てこれで良ければこちらのファイル形式を選択してダウンロードしてください。
こういった形で素材サイトを活用して素人っぽくないものがたくさんあります。
そういう素材を用意してそれをプライチの方に配置していくといったのが良いのではないかなと思います。
こういった素材を見つけるのに対してブロガーなどが紹介している素材サイトのまとめ記事を見ていただくと
良いサイトを紹介してくるのでそれを参考にしてご自身でブックマークしておくといった感じでストックしておくと
ページの作成の際にすぐ使えるかと思います。
これWebページじゃなくてもセミナーのスライドとかそういったものに使えますのでぜひ活用してみてください。
これフリーアイコンなんですが他にも画像素材サイトまとめなど色々ありますので
そちらもぜひ調べてみてたくさんあるのでそこを参考にしてください。
続いてなんですがペライティの使い方ということで解説をしていきたいんですが
まずはこちらの新しいページを作成するこちらをクリックしてください。
このテンプレートを使うこちらをクリックしてください。
今すぐ編集を始めるこちらをクリック。
こういった形で編集画面に進みます。
こちらの部分を変えた目にしてください。
こちらをモデルにどんどん作成していこうかなと思います。
まずヘッダー画像こちらを作成していきたいと思いますので
ヘッダー画像の作成なんですがこちらのPixel Editorを使ってやっていきたいと思います。
09:06
こちらのPixel Editorをどうやって見つけるのかといいますと
検索をしてください。
こちらのオンラインフォトエディターをクリックしてください。
これでPixel Editorの画面に進みます。
これでまずはこういったヘッダー画像を作成していきましょう。
まずこの新しい画像を作成こちらをクリックしてください。
この画像のサイズなんですが幅が2500で高さが1875
こちらのサイズで画像を作成してください。
これが編集画面になります。
ではまずこちらの背景がロックがかかってしまったので
こちらを2回クリックしていただいてロックを外してください。
では続いてこういった形でナビゲーターちょっと使いづらいんですが
ここをいじっていただいて背景全体が見えるように調整してみてください。
このナビゲーターをズームインかズームアウトしていただくと
このように全体が見えるようになります。
ちょっと使いづらいんですがここを全身見えるようにしていただいて
編集を始めていきましょう。
まず元となる画像を用意していただきたいと思います。
画像なんですがこういった誰かに撮ってもらった写真などを使っていきましょう。
12:02
こういった形で完成権がこちらになります。
こういった形で作成していきたいと思います。
もし画像がない場合は先ほどの画像素材サイトですとか
そういったもので見つけてきていただければなと思います。
ではまずこちらのメニューから画像をレイヤーとして開く
こちらをクリックしてください。
先ほどの素材を選択して開く。
ちょっと重たいので時間がかかるんですが
このように画像を配置できます。
このままだとサイズが微妙なので
編集から自由変形をクリックしてください。
必ずこのサイズを変更する場合は
パソコンのシフトキーをクリックした状態で大きさを変更してください。
シフトキーを押さないと
縦横比というものがあるんですけど
縦と横の比率が狂ってしまって
画像が歪んでしまうので必ずシフトキーを押しながら
大きさを変更してください。
これでエンターです。
もう一度やります。
この変更を適用しますかを
これで
切れてしまったのでもう一回やります。
画像をレイアウトして開く。
先ほど切れてしまったのでもう一回やります。
こういった形で調整してください。
15:02
このレイヤーについて軽く説明しようと思うんですけど
これが下地の白の背景色になります。
その上にこれは余計なものなので消してしまうんですが
また上のレイヤーがあって
背景の上にこの写真があるといった形になります。
今度上に行くたびに
正面に表示されるといった形になります。
ではまず完成形がこういったものなので
黒い四角形を配置して不透明度を下げてみたいと思います。
そちらに関してはこの描画ツールをクリックしてください。
四角形になっているのでこのまま
新しいレイヤーをクリックしていただいて
この状態で描画ツールで四角形をこのように作成してください。
この黒い四角形を作成できましたら
こちらをクリックしてください。
少し見づらいんですがこちらです。
こちらをクリックして不透明度を50%くらいにしてください。
不透明度を下げていただいたら
もう一度クリックして元の画面に戻してください。
続いてテキストを打ち込んでみたいと思います。
こういった形です。
このテキストの配置なんですが
ちなみにこういった右上に配置していると
第5才の場合右上に配置しているので
それを参考に作成しました。
完璧に同じな画像でなくても
この配置とかテキストの位置とか
そういったものを参考にしていただければなと思います。
テキストなんですがこのType2ですね。
こちらをクリックしてください。
Type2の場合新しくレイヤーを作らなくても
勝手に自動でこのレイヤーができるので
この新しいレイヤーを作る作業は必要ありません。
このテキストのところに
こういった形によく入れていただいたあと
フォントレット、フォントは
今回はユーゴシックにしてみたいと思います。
18:01
色なんですが黄色にしたいので
FF、FF、FFと入力します。
サイズもこちらで調整してください。
こういった形でテキストを配置します。
続いて社名のこの早を入力したいと思います。
サイズなんですがこうやって調整します。
OKです。
これでこういった形で配置をします。
これでちょっとシンプルなものなんですが
ヘッダー画像を作成しました。
最後にファイルから保存。
フォーマットがJPEGになっているのでこちらですね。
写真の場合はこのJPEGというファイル形式にしてください。
こちらに書いてある通りほとんどの写真に適しています
という風になっているのでJPEGを選択してください。
JPEGはこちら。一番最大まで上げてしまって問題ないです。
こちらでOKをクリックしてください。
ファイル名を入力していただいて保存です。
これでちょっと簡単なものなんですが
画像の方作成できました。
これでヘッダー画像の方作成できたので
これを配置してみたいと思います。
画像横幅フルサイズを選択して決定をしてください。
編集から画像を選択。
こういった形で画像を設定できました。
ちょっと画面が若干おかしくなっているので
保存をして一旦トップページに戻ります。
これでヘッダー画像を配置することができました。
21:10
こういった形でPixel Editorで文字を入れる程度でしたら
簡単に作成できるのでぜひやってみてください。
あとはこういったモデルを見つけて作成していくんですが
その場合完璧に似せなくても
こういった大体の配置とかを参考に
ご自身で作成していくという形になります。
例えばこういったプロフィールに飛ばすボタンですね。
こちらをちょっと作成して
真似して作成してみますと
おそらくになってしまうんですけど
こういった素材を使っているのかなと思いますが
こちらにリンクのURLですね。
ボタンを押した先の飛び先のページですね。
別ウィンドウにしますと
こういった別タブでページが開くようになります。
こういった形で設定をしてください。
若干ちょっと文字がデカいんですが
こちらはこのように調整してください。
こちらも完璧に似せる必要はないので
変えた概要を載せてみてください。
こういった形で配置を参考に作成することができます。
あとはこちらの問い合わせとか
こういったものが必要になるかと思うので
こちらをこのページを参考に作成します。
こちらもこのパーツのバー見出しというものを
使っていますのでそれを選択します。
こちら見ていただくと
このポイントの部分消しているのが
わかるかと思うので
このポイントの部分を消します。
24:02
見出しの席と問い合わせ
中央に配置しているので中央揃え
フォントサイズは大体でいいんですけど
これぐらいかと思います。
保存です。
ちょっと小さいんですがこういった形で
微調整しつつ見せていければと思います。
こちらのテキストですね。
こちらはこういった形で参考にせず
メッセージを参考にせず入力をしてください。
リンクの作成方法なんですが
こういったテキストを選択
こちらのリンクの挿入を選択してください。
飛び先のページのURL
こちらを入力してください。
この新規ウィンドウにしますと
新規ウィンドウじゃなくてもいいかなと思うので
無しでOKです。
これ設定自体はしていないので
リンクになっていないんですが
こういったリンクの挿入を設定していただくと
こういったリンクが作成できます。
テキストを選択してリンクの挿入できます。
こういった感じでこちらのモデルを参考にせず
作成ができるということになります。
これは保存です。
フォントサイズも大きめにして保存です。
こういった形で真似しつつ作成していきたいと思うのですが
このプロジェクトの箇所も先ほどの要素ですね
パーツからバーミラー
これも完璧に似せる必要はないので
こういった形で商品サービスで入力をしてください。
あとはこちらに商品サービスの概要とか説明とか
27:05
で保存ですね。
あとはこういった画像など配置していただければなと思います。
こちらについてはこちらの要素は
ブロックの投入から上画像一列
これを使用していると思うので
こういった形で同じものを選択します。
こちらで線を引いているので
こちらの下線を
みなしなべ、太地、保存
こういった形で編集をしていきます。
こういった形で画像、イメージ画像を配置します。
この編集を押していただいて
画像を選択してアップロード
これでこういった先ほどの画像素材サイトのものを
選択して開くんですね。
もちろんこういった独自の画像がある場合は
そちらを当てはめてください。
こういった形で少しデカいんですが
配置をします。
この身段中身の位置がいらないので切ってください。
こういった形で入力をします。
あとは先ほどの
ブロックの挿入の上画像
1列を使っていただくと
こういった講演中の様子なども作成できます。
この場合このボタンがいらないので消してください。
30:05
身段中の位置もいらないので消します。
こんな感じでこちらにセミナーの様子など
写真を載せていただくと
こういった形で作成ができます。
あとはまたこのお問い合わせの項目だったり
こういったサービスなどがあったら紹介するといった形で
どんどん配置していくといった形になります。
あとは自分が出している書籍などがありましたら
紹介していただくといったものになります。
これは先ほどのパーツバー見出し
このテキストのブロックいらないので削除してください。
こういった形で見出しを作成します。
画像なんですがこちらはおそらくこれを使っているかなと思うので
上画像1列ですね。上画像2列ですね。
こちらを選択してください。
見出しいらないので消していただいて
こういった形で画像を読むのみにしてください。
これでどんどん配置できるかなと思います。
最後にこういった書籍の一覧ページ
こちらの誘導するボタンを配置してください。
ボタンフォームからボタン拡大ですね。
こちらを選択してください。
33:03
こういった形であとはURL
実際のこういったページに飛ばしているのか見てみますと
プライズで作った別ページに飛ばしています。
こういった形でこちらに紹介しきれなかった書籍などを
また別のプライズで作ったページに飛ばすといったことも
参考になりますのでこういった形でモデルを見つけて
参考にしつつ作成をしていってください。
あとこういったTwitterなどがあったらTwitterですね。
おそらくこれはTwitterも読み出しから作成していこうかなと思います。
これはTwitterに関しては特になくてもいいかなと思うんですが
どういう風にやっているのかといいますと
多分これはHTMLの要素を使っていると思いますので
これプレミアムプランじゃないと使えないので
このTwitterを入れたい場合はプレミアムプランに加入してください。
こういった形で特に入れたい人はこの要素を入れてみてください。
Twitterの埋め込みについてはWeb上にたくさん情報がありますので
そちらを参考に配置してみてください。
最後にこのメールマガジンですね。
メールマガジンの項目を作成してみたいと思います。
15ドルの28ですね。
メールマガジン。
テキスト要素を削除。
これについてもおそらくブロックの挿入から
こちらの要素ですね。
上画像1列で決定です。
この見出しはいらないので消してしまってください。
このようにアイコンを使っていますので
先ほどのアイコンものの素材を利用しましょう。
36:04
これちょっと関係なさすぎるので
先ほどのアイコンものからメールマガジンに関連するものをダウンロードしましょう。
メールマガジンとこの検索窓に入力しますと
関連するものが出てきます。
メールマガジンだとなかったので
こういった形でメールのアイコンが出てきますので
そちらを選択してください。
このピングでダウンロードしました。
こちらの編集から画像を選択してアップロード
メールのアイコンを選択で開く
これで同じようにメールのアイコンを表示させることができました。
この注意なしを削除
あとはどういった内容を配信しますよといった形で入力をします。
こういった形で入力をします。
ボタンを削除
こういった形でモデルを参考にしつつ作成していくと
自分で一から作るよりは
クオリティが強くならずに作成することができます。
あとこういった要素の配置の方法などが
モデルがあると自分で考えずに配置できるので
ぜひこういった形でモデルを見つけてから
ウェブページを作成してみてください。
あとはこのヘッダー画像ですね。
こちらも全く同じで作成するのは難しいんですが
文字の配列とかそういったものを参考にして作成しつつ
あとはこういった画像素材サイトから画像を持ってきて
画像配置して
またアイコンなども活用してみて
このウェブページを作成してみてください。
39:04
こういった形でノンデザイナーのための
ウェブデザイン入門ということで開設しました。
今回の内容は以上になります。