design
web制作におけるワイヤーフレームとはページのレイアウトを示した見取り図のこと。 ワイヤーフレームでは、ヘッダやフッダ、ナビゲーションなどの要素をテキストと枠のみで構成し、設計情報やユーザービリティも考慮しながら大まかな配置を決めていく。代表…
ディレクトリマップはwebサイトのデータ構造をまとめたものでwebサーバー上のどこに何のファイルが格納させているかを定めた書類。 また制作の進歩状況や素材の支給状況なども把握出来るように備考欄を設けて進行管理も兼ねてりようすることがある。 excelな…
サイトマップとはwebサイトの構成や構造全体を把握出来る相関図。 webサイトのコンテンツ間を線でつなぎ、ツリー状にしてページ間の導線をわかりやすくまとめる。
webサイトはエンドユーザーに見てもらうことを目的に作られている。 サイトを作ることは、それ自体が目的ではなくあくまで情報伝達の手段。 そして自社サイトでもない限り情報を伝達したいと考えている主体者はクライアント。 制作する側はクライアントとエ…
idは固有のグループに名前をつけて参照するための属性。 id属性はタグ1つに対して1つしか指定出来ないため、属性値もHTML内に1つしか指定出来ない。 classはタグに種類や分類などの意味を持たせるための属性。 class属性はタグに1つに対して複数指定出来るた…
webサイトは鮮度が重要であると言われている。 継続的に更新を行うことはSEO的にも意味がある。 webブランディングにおいてユーザーがサイトと接触する回数や延べ滞在時間を増やすことがブランド訴求にプラス要因として働く。 またCMS構築ツールが普及期に入…
グラフィックを制作していくときに画像の背景を取り除いて対象物のみを合成して使うことがよくある。 ポイントは「選択範囲」と「マスク」。 選択範囲の作成 選択範囲の作成には「クイック選択ツール」を使う。しかし被写体と背景の色が似ていたり複雑な形を…
画像補正の手順は、「角度補正」「トリミング」「ごみ取り」「レベル補正」「色調補正」 角度補正 ものさしツールを使う。 トリミング 切り抜きツールを使う。 ごみ取り コピースタンプツールや修復ブラシツールを使う。 レベル補正、色調補正 ヒストグラム…
パス取りは「トレース」とも呼ばれ、ロゴ、イラスト、写真などの対象物の輪郭をベジェ曲線で囲んでいく作業。 Illustratorのペンツールを使用してパスを描いていく。 塗りはなしに設定し、線の色は補色などのわかりやすい色にする。 パスは上に描かれていく…
検索エンジン ・OR検索 スペースの間に|(パイプ)を入れる。 ・NOT検索 除外したいキーワードの前に-(マイナス)を入れる。 ・完全一致検索 ""でキーワードを囲む。 ・あいまい検索 キーワードの中に*を入れる。 ・イメージ検索 画像の大きさや色などでフィル…
テキストのみを表示するだけであれば、数ピクセルのズレがそれほど気になることはないが、1ピクセル単位でデザインされたwebページに表示上の崩れが発生するとイメージを損なうことにもなる。 web制作を請け負った以上対象とするブラウザは、すべての環境で…
テキスト入力する際に気をつけること 全角・半角 全角・半角の混同、特にスペース。 記号は全角を用いうるか半角を用いるか明確に決めておく。 機種依存文字 異なるハードウエアやソフトウエアきちんと表示できない可能性のある文字。WindowsとMacintoshなど…
写真のメリハリを調整し、写真に柔らかさやインパクトを加える。 明るさとコントラストは簡単に調整出来るが、細かい調整ができないのでハイライトとシャドウをしっかり確認しながら慎重に調整する。
写真を明るくしたり暗くすることで全体の印象を変える。 調整しすぎるとシャドウ部が黒つぶれしたり、ハイライト部が白飛びするので、少しずつ調整しながら進める。 ただ、写真によっては黒つぶれや白飛びさせた方が良くなったりするので、自分のイメージど…
色味の鮮やかさを調整することで写真全体の印象を変える。 全体の色味を鮮やかにしたり、彩度を下げてノスタルジックな雰囲気にしたり、極端に下げることでモノクロ写真を作成することも出来る。
色味を変化させることで、写真の印象を全く違ったものに変える。 色相環(シアン→ブルー→マゼンダ→レッド→イエロー→グリーン)を用いて色味を変化させられる。 色補正をするというより、色味を変化させてイメージを変えたい場合に使用する。
カラーバランスは色かぶりした画像を補正してナチュラルな色味に修正する。 さらに自分の伝えたいイメージを表現するために色を調整してその写真の個性を際立たせることが出来る。 写真は色味を変えるだけでがらっとイメージが変わるので、写真を表現する上…
ホワイトバランスとは、さまざまな色温度の光源の元で白色を正確に白く映し出すように補正する機能。 例えば晴天時の陰などは色温度が高く、色補正をしないで撮影すると、画像が青みがかかる。 画像が色がぶりしているしているかどうかは、情報パレットで簡…
ヒストグラムは画像の階調情報を知るためのもの。 横軸に明るさ、縦軸に明るさごとの画素数を積み上げ、画像の明暗の傾向を山なりのグラフで示したもの。 シャドウ部が左にハイライト部が右にある。
トーンカーブは画像の明るさや、コントラストの調整をするためのツール。 縦軸と横軸からなるグラフのような形になっている。 横軸は入力値(修正前の画像)で縦軸は出力値(修正後)の数値になっている。 このグラフの斜め45度の線をカーブさせたりすることでさ…
フィルタを使うと写真にニュアンスやインパクトを与えることが出来る。
写真の補正やアクセントの追加に便利なのがブラシツール。 自然な補正をするにはブラシツールをうまく使いこなすことが大切。 絵筆のような感覚で使用するが、そのタッチをとても細かくカスタマイズすることもできる。
アナログで色を塗る時にマスキングテープなどを使用するように、画像処理ソフトでもマスキングテープのようにマスクを使用して色を塗ることが出来る。
レイヤーとは、写真や文字などを管理するための透明な器のようなもので、統合しなければいつでもやり直したり削除することが可能なので便利な機能。 元画像を傷つけずに加工していきたい場合は、元画像を新規レイヤーにコピーしてコピーした画像を加工する。
コンピュータが画像を扱う場合、色情報として、各点についてR(赤)・G(緑)・B(青)の三原色のデータ領域(チャンネル)をもち、その組み合わせで色を表現する。 それぞれをグレースケールで表したものがカラーチャンネル。 これに加えて「透明度」（他の画像など…
撮影したRGBの画像データは、使用するモニターによって色が変わってしまうので詳細なRGBの情報を定める必要がある。 これを「プロファイルを埋め込む」という。 もしプロファイルが埋め込まれていない画像を扱うには、画像ソフトでプロファイルを設定するこ…
デジタルカメラでは、レンズを通して入ってきた光をCCDが受け取りそれを電気信号に変換することで写真に記録するが、そのCCDが生成した電気信号をほぼそのままデジタルデータとして記録したのがRAWデータ。 RAWデータは現像される前の状態なのでパソコンで現…
ウェブサイトの補足情報以外にもサイトマップとして機能するようなリンクの一覧をフッターに与える場合がある。 記載する情報はグローバルナビゲーションと同じ項目を再度羅列する形になるが、特に携帯端末での閲覧時はあると便利。 また、フッターに含める…
補足情報などを掲載するためにコンテンツを掲載する領域とは異なるデザインを施したフッター箇所を作る。 フッターに含まれる主な情報は、プライバシーポリシー、ヘルプ、サイト責任者の連絡先、コピーライトに関する説明。 補足説明的な箇所であるため、メ…
ポータルサイトやSNSのようにユーザー側で使いたい色で追加できる仕組みを持つウェブページの場合、ボックスを移動させたりサイズを変更できるといった機能が必要。 リサイズが可能であることをユーザーに知らせるためにはグラフィックに工夫する。 ドラッグ…
