web
cookieの処理を行なうスクリプトをJavaScriptで書いてまして、その動作確認をchromでやってたんですけど、どうやってもクッキーにデータを保存出来ませんでした。 <html> <head> <title>クッキーサンプル１</title> <script language="javascript"> var visitName=document.cookie; var today=new Date(); today.setMin</head></html>…
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など…
ウェブサイトの補足情報以外にもサイトマップとして機能するようなリンクの一覧をフッターに与える場合がある。 記載する情報はグローバルナビゲーションと同じ項目を再度羅列する形になるが、特に携帯端末での閲覧時はあると便利。 また、フッターに含める…
補足情報などを掲載するためにコンテンツを掲載する領域とは異なるデザインを施したフッター箇所を作る。 フッターに含まれる主な情報は、プライバシーポリシー、ヘルプ、サイト責任者の連絡先、コピーライトに関する説明。 補足説明的な箇所であるため、メ…
ポータルサイトやSNSのようにユーザー側で使いたい色で追加できる仕組みを持つウェブページの場合、ボックスを移動させたりサイズを変更できるといった機能が必要。 リサイズが可能であることをユーザーに知らせるためにはグラフィックに工夫する。 ドラッグ…
タブインターフェイスはウェブページを再読み込みすることなく表示内容を切り替える方法として使えるユーザーインターフェイスの一種。 主にカテゴリー別に仕分けたリンクリストを省スペースで提供する目的で使う。 タブインターフェイスを実装するには、適…
数値データなど読みにくくなりがちな情報を整理する方法がテーブル。 CSSの指定で特にポイントとなるのは、セルの背景色の設定と、罫線の色使い、セル内に与える余白の大きさ。 このビジュアルデザインに関する3点をそれぞれ最適化することで、読みやすく、…
ガジェットはウェブの技術を使ったサービスの中でも特に頻繁にアクセスするものを個別のアプリケーションにしてディスプレー上においておくための仕組み。 ガジェット化したサービスを使うことでユーザーは手間を省くことができる。 ガジェット配置画面には…
ウェブページに罫線を反映させるには、CSSのボーダープロパティを使う。 ボーダープロパティーはHTMLの要素が持っているボックスに対して与えることができる。 ウェブデザインで頻繁に使用する罫線だが、あまり自由度が高いとはいえない。より柔軟なデザイン…
JavaScriptの機能拡充やフラッシュなどのRIA技術が普及して、インタラクションに工夫を凝らしたフォームデザインができるようになった。 例えば入力フィールド数が多いフォームを前半と後半にわけ前半の入力が終わり次第後半の入力ができるようになるという…
フォームはウェブサイトに接していれば見ない日はないほど需要の高いパーツ。 ちょっとしたフォームでもきれいにレイアウトしてあるとウェブサイトに情報を渡す瞬間も安心出来る。 フォームを整理するポイントは、フォームのブロックだけを独立した囲みに入…
検索ボックスはどのウェブサイトにも当たり前に設置出来るようになったパーツ。 レイアウト上のポイントは、テキストフィールドにはボックスの外枠と検索ワードとの間に余白を設ける。 この余白は外観の質を決定づける非常に重要な役割を担っている。 この余…
動きを伴うコンテンツはいわいるリッチインターネットアプリケーション(RIA)作成ツールを利用する。 特にフラッシュのようにキーフレームアニメーションとスクリプティングアニメーションの両方を作成出来る機能を持ったツールは幅広い活用に耐えうる。 しか…
コンテンツのユーザーが行動や意思決定の助けと出来るような図は、言葉による説明より機能的。 こうした図はプロセスダイヤグラムと呼ばれている。 ウェブの場合ユーザーが読み進めるうちに必要な手続きを全て把握、あるいは実行出来るような仕組みを表現す…
組織の構成を図示したグラフィック要素は言葉では複雑になりがちな説明を一瞬で済ませられる優れた素材。 ハブアンドスポーク図 組織の中心人物とその影響範囲のように上下関係ではなくノードとなる物ごとの影響力の力強さや、クロスするコミュニティの属性…
図を使って数量に関する情報を表現する事をビジュアライゼーションという。 印刷物やウェブのように限られた面積の上で展開する場合伝えるべきテーマを絞って作る事が重要。 刻々と変化するデータの蓄積を得意とするウェブのシステムはビジュアライゼーショ…
一度に送受信できるデータ量に限りがあるウェブサイトの環境においてイメージデータの軽量化はデザイナに託された重要な責任。 ビット別の軽量化のポイント。 8ビット分の色彩で構成するインデックスカラーテーブルから、使用する色を選ぶ形でファイルサイズ…
写真画像と異なりイラスト素材は元のイメージがピクセル正式ではないケースが想定される。 代表的なイラストのデータ形式はベクターデーター。ドロー形式とも呼ばれる。 ピクセル形式でないため完成データを拡大縮小しても外見的な劣化発生しない点が長所。 …
写真画像を効果的に使用するために、トリミングを行いコンポジションの調整を行う。 写真をトリミングする場合に意識するポイントは三分割グリッドなど基本グリッド上における被写体の位置調整と、消失点など遠近法を配慮したコンポジション作りの2点。 グリ…
