https://www.photo-ac.com/
会員登録が必要（無料）
検索できる回数、１日にダウンロードできる画像の枚数に上限あり
日本人の画像を探しているならここ！
https://pixabay.com/ja/
会員登録の必要なし
検索できる回数、１日にダウンロードできる画像の枚数に上限なし
英語で検索する方が欲しい画像が見つけやすい。
https://www.pexels.com/ja-jp/
会員登録の必要なし
検索できる回数、１日にダウンロードできる画像の枚数に上限なし
英語で検索する方が欲しい画像が見つけやすい。
好きなサイズで画像をダウンロードできる。
「カラム・レイアウト」は、垂直方向にコンテンツエリアを区切る手法です。
メニューやコンテンツなどが横並びになるタイプは2カラム・レイアウトと呼ばれます。
他にも3カラムと呼ばれるコンテンツの両脇にナビゲーションとメニューを配置するタイプがあり、これらはマルチカラム・レイアウトとして分類されています。
「フリー・レイアウト」は、基本的にブラウザやディスプレイのサイズを考慮せず、固定した幅で自由にコンテンツを配置していくパターン。
多くの情報を好きなようにレイアウトでき、他のWebサイトとは異なるオリジナリティを意識したレイアウトを作り出せるという強みを持ちます。
さまざまなデバイスの表示領域に柔軟に対応できるレイアウトが、「グリッド・レイアウト」です。常に横幅いっぱいにコンテンツを表示するリキッド・レイアウトは、画像幅に合わせて伸縮することで各コンテンツが適切な配置に収まります。
スマホ用Webデザインの最適なサイズ
スマートフォン表示時の見やすいフォントサイズ
タイトルのフォントサイズ
基準：20px
範囲：18~24px
本文のフォントサイズ
基準：15px
範囲：14・15・16 px
行間（行送り line-height）のフォントサイズ
基準：1.8
範囲：1.5～2.0
画像サイズについて
2021年現在のスマホ用Webデザインの最適なアートボードサイズは、375px × 667px
iPhone端末の採用ディスプレイ「Retina」を見据えて、Webデザインに使用する画像サイズは現状3倍で作成するのが良い。
バナーは主に広告で使われるWebデザインで、Webページ上で他のWebページを紹介する役割があります
Webサイトやランディングページとは違って、掲載できるサイズがある程度決まっています。
バナーは、その限られたサイズの中で伝えたい情報を伝えるWebデザインです。
画像のようにあらかじめ決まっているサイズの中でデザインをします。
最終的にランディングページへと誘導するので、ユーザーが興味をもつ情報を整理してデザインする必要があります。
アンカーリンク（aタグ）とは、HTMLファイルに記述するタグで、ページ遷移するためのジャンプリンクによく使用されるタグ
href属性（リンク先指定）やtarget属性（別ページ表示指定）と合わせてよく利用される。
アンカーリンク（aタグ）の使い方
・リンク先を指定する使い方
・アンカーポイントとして指定する使い方
・別ページ・別ウィンドウで表示する使い方
リンク先を指定する使い方
アンカーリンク（aタグ）のhref属性を使い、リンク先へページジャンプ（遷移）させることができる。
記述例：
〈a href=”http://4koma-web.com/coding/”>クリエイター：コーディング備忘録ブログ〈/a〉
クリエイター：コーディング備忘録ブログ〈/a〉
アンカーポイントとして指定する使い方
アンカーリンク（aタグ）のidやname属性を使い、ページ内の特定位置（アンカーポイント）を指定することができます。
記述例：
〈a id=”point”〉クリエイター：コーディング備忘録ブログ〈/a〉
Sクリエイター：コーディング備忘録ブログ
1. WordPressって何？
簡単にいうと
HP・ブログの運営を楽にするための無料のソフトウェア
自由度が高く、自分の好きなようにデザインやブログの構成を変えることができます。
テンプレートが簡単に使え、コードの知識がなくても使えるが、知識があるとより自由にカスタマイズできます。
2.プラグインで機能を付け足せる
目次を自動表示してくれるもの
投稿した画像を自動圧縮してくれるもの
サイドバーなどに人気記事を表示してくれるもの
お問い合わせフォームを設置してくれるもの
バックアップを自動で取ってくれるもの
など様々です。
何をどこに、どのように配置するかという意味です。
レイアウトという言葉は、雑誌や広告、ポスター、アプリなどのデザイン編集の作業でよく使われます。
例：家具の配置、パンフレット、新聞などあらゆる分野で使われます。
レイアウトは、デザインに含まれるとものの1つと考え、デザインというのは「配色」や「文字のサイズをどうするか」「どんなフォントを使うか」「どんな写真を使うか」など、あらゆる要素を含めて、機能的なものにすることを表します。
テーマでデザインをおしゃれに
WordPressには「テーマ」と呼ばれるデザインテンプレートが無数にあります。
このテーマ選びがとても重要です。 良いテーマをインストールすれば、カスタマイズをほとんどしなくても、おしゃれなWebサイトが完成します。
パーマリンク設定をはじめに行う＆設定は変えない
パーマリンク設定とは、ページのURLをどのようなルールで表示させるかという設定のことです。
ことあるごとにバックアップを
WordPressではことあるごとにバックアップを取りましょう。
プラグインの入れすぎに注意
このプラグインが便利でついついたくさん入れてしまうのですが、プラグインはときにトラブルのもとになります。テーマとの相性やプラグインどうしの相性が悪ければ、エラーが出ることもあります。
また、表示速度が落ちる原因になります（プラグインによります）。
不具合があったら、プラグインを停止してみる
スマホやタブレット表示までチェック
自分のパソコンで見た時の表示ばかり気にしていて、スマホやタブレットで見たときにデザインが崩れてしまっている、ということです。 カスタマイズを行ったときには必ずスマホ表示までチェックしましょう。
フラットデザインとは？
2012年頃〜フラットデザインが世界的にトレンドとなっている。
iPhoneでフラットデザインを採用されたことで、一気に広がった。
フラットデザインの対義語は「リッチデザイン」と呼ばれます。
色々な装飾やエフェクトがついていてリッチな（≒充実している）という意味があります。
例：iPhoneiOS7〜やWindows8、Instagramのユーザーインターフェース
フラットデザインの利点
シンプルでコンテンツに目がいきやすい
小さな画面でもスッキリする
さまざまな大きさの端末に対応しやすい
トレンドで受け入れられやすい
レイアウト：タイルを美しく並べる
フォント：シンプルなゴシック体を使う
写真：高品質な写真を使う
アイコン：シンプルなアイコンや、フラットなアイコンを使う
タイポグラフィの定義
読みやすく、美しく文字を配置すること
「文字をきれいに、読みやすく見せる」設定
文字をデザイン要素として用いる手法
最近では「タイポグラフィ」というと、このようなアーティスティックな文字の表現を指すことの方が多い
タイポグラフィの作り方のコツ
・数字をデザイン要素として使う
・現実と融合させる
・アルファベット1文字をシンボリックに配置
・写真の上に文字をのせる
・写真の中に文字を組み込む
・写真を文字型にする
・曲線に沿ってレイアウトする
・手書きフォントで楽しい雰囲気を出す
・大胆な大きさにする
・文字で何かの形を描く
・リボンを使う
・何かの形に沿って文字を並べる
・イラストの中に文字を組み込む
・背景に絵の具の塗りつぶしを置く