無料で使える画像・イラスト
- pixabay
- 2.400万点以上の高品質なフリー画像素材
- ダウンロードして様々な用途に使える、フリーで高品質な画像・動画素材。商用利用でき、クレジット表記も不要です。
- 写真AC
- 無料写真素材を提供する「写真AC」のフリー写真素材は、個人、商用を問わず無料で使えます。
- クレジット表記やリンクは一切不要です。
- ぱくたそ
- 人物や背景（テクスチャ）など様々なジャンルの写真素材を無料で配布しているフリー素材。
- 会員登録は不要でダウンロードの回数制限や画像サイズごとに料金が発生することはない。素材データを自由に使えます。
- フード・フォト
- 食材・料理や野菜・果物のフリー写真素材。
- プロカメラマンが撮り下ろした果物・野菜などの食材や料理・食器、ドリンク・飲料などを無料でフリー画像素材として公開。
- イラストAC
- 無料イラスト・アート・年賀状・年賀・画像などの素材がフリー。
- AI・EPS形式の素材も無料でダウンロードOK。商用利用、編集もOK。
- いらすとや
- 季節のイベント・動物・子供などのかわいいイラストのフリー素材サイト。
- 個人利用・商用利用ともに完全無料。
- ヒューマンピクトグラム2.0
- 人間ピクトグラム素材のギャラリー。
- 無料ピクトグラム素材。
- いらすとん
- 無料で商用利用もできる、水彩のゆるかわいいイラストの素材集
- 年賀状や暑中お見舞いやクリスマスなど、便利なイラスト。白黒の線画イラストも。
- O-DAN (オーダン）
- 無料写真素材・フリーフォト検索。
- 高品質な無料写真素材・フリーフォトを40以上の有名ストックフォトサイトから日本語で横断検索できるサービス。
- タダピク
- 商用利用OK・クレジット表示も不要の画像素材検索エンジン。
- キーワードから複数の画像素材サイトを横断検索。
レスポンシブWebデザイン
- MediaQueries(メディアクエリ)
- メディアクエリで、画面サイズに応じてCSSを切り替える。メディアクエリは、@mediaを使って条件を分岐させるCSSである。
- ブレイクポイントは，画面サイズに応じてレイアウト切り替わるポイントである。そのポイントは、表示領域の横幅width、縦方向の長さheight、画面の横幅device-width、画面の縦方向の長さdevice-height、端末の向きorientationで指定できる。
- スマートフォンデザインからCSSを記述するのがモバイルファースト、ＩＥ８以下でも利用できるようにＰＣ用から記述するのがＰＣファースト。モバイルファーストのほうがコードが少なく済む。ＰＣはメディアクエリの記述が増えるから。
グリッドシステム
グリッドシステムは，レイアウトを横方向に縦の線で塔分割し配置するデザインする手法である。各コンテンツを「何列分の幅で配置するか？」を指定するのが一般的です。
レイアウトのための縦線と横線を引いて、そこにできた四角部分に情報をはめ込み、「美しい」「情報が伝わりやすい」WEBサイトを実現する。
Webデザイン
- 〇近接
- 情報を整理し伝わりやすい位置に
- 情報のまとまりと情報間の間隔を適切にバランスよく配置して、ユーザーの視線をコントロールする。同一の情報は近くに置く。
- 情報テーマは３～５ぐらいにする。情報レベル・内容をあった情報をグルーピングして、異なる情報レベル・内容をグルーピングしない。情報グループの間隔は均等にすると区別がしにくい。ホワイトスペース（空き）を使い違いを作る。
○整列（目的は一体化と組織化）：整列は、近接のグルーピングした情報を整列して、きれいに見せて、情報同士のつながりをより強いものにする。情報の関連性を表現するため、「整列線（アライン線）」（見えない線）に情報のグループ同士の結び付きを強くする。ＷＥＢを見たときに、アライン整列線を認識できるか。テキストの左揃え・真ん中揃え・右揃えを統一する。例外を作ると「目を引く」ことができる。あえて行揃えなどを変えて、注目させる。例外を使ってデザインするためには、基本的な部分で整列原則を守ることが必要である。
○反復（繰り返し、共通化、ページの一体感を作る）：快適に使えるように、他のページに移動すると、他のWebサイトのように見えるということがないように、「反復」により、「統一感」を持たせる。「グローバルナビ」や「ローカルナビ」を同じものを使う。ページ全体の「レイアウト」も各ページで共通にする。「反復」「共通」により、「統一感」を持たせる。レイアウトのパターンを複数にする場合、階層ごとに統一し、３種以内のレイアウトパターンにする。
○コントラスト：情報のレベルをコントラストでコントロールする。異なるＷＥＢ要素を際立たせ、情報を伝わりやすくする。コントラストは、異なる要素を分け、それぞれの持つＷＥＢ要素の意味を分かりやすく伝える効果がある。例えば「見出し」と「本文」は異なり、コントラストを付けて、役割をわける。ポイントは少し差を付けるのではなく、大胆にコントラストを付けて、情報を分離させ理解しやすくする。一目で内容が分かる。白抜きや補色などでコントラストを付ける。メリハリを付ける。見出しを白抜き文字にすると、コントラストが際立つ。同じ要素にコントラストを付けない。コントラストを付けるのは異なるＷＥＢ要素間である。
【カラーの反復】配色を決めるときは、3つの基本となるカラーを用意する。「ベースカラー」はWebページの背景色に使われるカラーである。「メインカラー」はWebサイトの印象を決定づけるカラーである（ロゴマークやヘッダーの背景色など）。「アクセントカラー」は、メインカラーと反対の色を使う。目立たせたい部分に使うと効果的である。カラーのルールが決まって、繰り返されることで、Webサイトの統一感がでる。
4段組と2段組のレイアウト
以下の画像は、画面サイズに応じて段数が変化します。大画面または中画面で見た場合は4段組、小画面で見た場合は2段組で画像が表示されます。
パーミッションとは
インターネットはUNIXのシステムを多くが使用してます。UNIXのシステムは複数のユーザーが利用することを前提としているので、たとえば、WEBサーバにあるファイルは、すべての人が見ることができます。
しかし、自分のホームページにあるHTMLファイルや画像データを他の人が勝手に削除したり書き換えたりすることはあってはならないため、パーミッション（属性）で制限をかけます。
パーミッションは、「読み」「書き」「実行」の3つの実行権と、「自分(Owner）」「グループ（Group）」「他人（Other）」の3つの所有権があります。
実際に自分でファイルのパーミッションを変更する際、FTP機能を使用すると簡単に設定を行うことができます。
- 実行権
- 読み:（ファイル）指定したファイルの内容を表示する／（ディレクトリ）リストの表示可能。
- 書き:（ファイル）ファイルの上書き、削除（ディレクトリ）／ディレクトリに新規ファイル作成可能。
- 実行:（ファイル）実行ファイルの実行(プログラム、CGIなど)／（ディレクトリ）カレントディレクトリにすることができる。
- 「読み」「書き」「実行」の3つの実行権は以下の記号または数字で表わす。
- 読むことができる(Readable):（記号）r（数字）4
- 書くことができる(Writable):（記号）w（数字）2
- 実行することができる (eXecutable):（記号）x（数字）1
- なにもできない:（記号）-（数字）0
- 表記
- たとえば、自分はすべての実行権が許可するが、自分以外のグループや他人は、何も許可しない場合は、「rwx------」という表記になります。すべての人にすべての実行権を許す場合は、「rwxrwxrwx」となります。
- 3桁ごとの数字の意味は、左から所有権の自分、グループ、他人になり、実行権の読み、書き、実行になります。
- たとえば「rw-r--r--」の場合、これを数字で表すと、「自分」→r+w=4+2=6、「グループ」→r=4、「他人」→r=4。「rwx」表記と同じ順番で並べます。したがって、数字の場合「644」と表記します。
- 読むだけのファイル
- 644（rw-r--r-）
- WEBページとして公開するHTML文書などは、「読み」を許可する必要があります。
WordPress
- InstantWP
- wordpressのローカル環境をＵＳＢに作れます。USBメモリなどに入れて持ち運べるポータブルアプリで、InstantWPのWEBサイトや、窓の杜やGithubのサイトからInstantWPをダウンロードします。
- 「WordPress」のテーマやプラグインをローカルでテストするための環境を迅速に構築できます。テストして問題がなければWEB上のwordpressに反映させることができます。Webサーバー「Apache HTTP Server」、データベースサーバー「MySQL」、データベース管理アプリ「phpMyAdmin」などがパッケージになっています。
- 窓の杜
- ユーザー名：admin、パスワード：password
- 日本語化するには、Wordpress管理画面にアクセスして、[Settings]->[General]へ。「SiteLanguage」の項目で[日本語]を選択します。選択したらページ一番下の[Save Changes]をクリックして完了です。昔は個別に日本語化ファイルをダウンロードしてインストールする必要がありましたが、現在ではWordpressが行なってくれます。
- ボタンを押しても反応しない。起動しない、などWordpressが表示されない場合はInstantWPのバージョンを下げたものを使用します。旧バージョンはGithubで公開していますので、必要に応じてダウンロードします。
- InstantWPでは、複数のWordPressを立ち上げることはできません。
ホームページ作成ソフト
いつまで「Microsoft Expression Web 4」がダウンロードできるかわからない。
- Microsoft Expression Web 4
- Microsoftがパッケージソフトとして販売していたホームページ作成ソフト「Microsoft Expression Web 4」が、開発終了に伴い2012年からフリーソフトとして無料公開されています。
- 「Microsoft Expression Web 4」をインストールするため、Microsoftの公式サイト（microsoft.com/en-us/download/details.aspx?id=36179）からインストーラーをダウンロードします。
- 公式サイトは、英語版の「Microsoft Expression Web 4（Free Version）」のダウンロードページが開きます。でも、日本語版をダウンロードことができます。最初に目にする「download」でなく、その下の「Details」ボタンをクリックして言語一覧を表示します。その一覧の中から「Japanese」を選択すると「Web_Trial_ja.exe」というファイル名のインストーラーがダウンロードできます。
色彩
- ＨＳＬ
- HSLとは、色を「色相(Hue)」「彩度(Saturation)」「輝度（Lightness)」の3要素で表現します。デザインを行なったり実装の際にはHSLを推奨されます。HSLからRGBへの変換は、計算量の少ない関数で行えます。
- RGBより直感的な色指定方法としてCSS3で追加されました。キーとなるhueを決めれば、彩度と輝度の割合を変えるとまとまったサイト配色になります。
- hsl(色相,彩度,輝度)。hue（色相）0～360°の角度の値で指定します。0=360=red。saturation（彩度）0～100%の割合で指定します。100％＝純色、0%＝灰色。lightness（輝度）0～100%の割合で指定します。100%=白、50％=純色、0%=黒。明度とは違います。明度は100%=純色、0%=黒です。
- ＨＳＬＡ
- 透明度を指定する場合はhsla()を使います。hsla(0,100%,50%,.5)のようにalpha：透明度1を0～1の間で指定します。