ホームページの雰囲気を変えるちょっとしたWebデザイン変更についてお伝えしていきます。長年ホームページを運営していると「少し雰囲気を変えたいな」と思ってくるときがあります。ただ、またホームページをリニューアルするとなると大掛かりな予算、そして手間がかかります。 そんな時には、現在のホームページの一部を変更して雰囲気を変える、マイナーチェンジを行うということを
ウェブデザイン
ホームページ制作でどこまでリアリティを表現できるかということを考えることがあります。「ホームページの情報量」ということが話題になる場合、Webにおいては、基本的にテキストや画像の量が情報量になると思います。しかし、情報量が多くても、それが実際のユーザーが感じる情報量の多さとはイコールにはならず、また、情報を複合した「リアリティ」につながるかといえば、単純に検索エンジンのようにはいかないのが実情でしょう。ホームページ制作では、テキストデータが基本になりますが、このメリットは、コンピュータにも解読可能である点です。
ホームページ制作でどこまでリアリティを表現できるか
サイトのユーザビリティとSEOを無視した場合、ホームページ制作に高額な費用をかけたとしてもほとんどの場合、Webマーケティング効果を期待することはできません。ホームページ制作におけるユーザビリティ向上の重要性と、ユーザビリティとSEOの関係、そしてクローラビリティとの関係を把握した上で、ホームページを設計していくことが大切です。ユーザビリティは、ウェブユーザーのためのもの、そして、クローラビリティは、ウェブサイトの情報を正確に捉えるためにやってくる検索エンジンクローラーを意識したものです。ユーザビリティやSEOを無視した場合、ウェブサイトの価値は一気に落ちます。これはウェブマーケティングツールとしての価値です。
サイトのユーザビリティとSEOを無視した場合
今回は、またウェブ制作の思い出話について書いていこうと思います。Web制作・Web関連カテゴリでも良いのですが、雑談程度に書いてみようと思ったため、こちらに投稿します。 私は、ホームページ制作（ウェブサイト制作）にあたり、メモ帳、サクラエディタ、Notepad++で育ちました。 さすがに今ではメモ帳は使いませんが、やはりエディタで作成することが一番落ち着きま
手書きのワイヤーフレーム
特にECサイト（ネットショップ）の場合、サイト単体でのブランディングはかなり困難を極めます。情報量の少なさによるハンデ ブランディングを端的に捉えた場合、「Aとは…」に続く部分の共通認識をいかに作り上げていくか、ということになると考えています。つまり、ある対象の自己同一性の共通認識を作り上げていくことです
サイト単体でのブランディング 情報量の少なさによるハンデ
コーポレートサイトとECサイト、ネットショップでは、全体的なウェブデザインやページデザインの特性が異なります。ネットショップの最大の目的は掲載商品を販売することです。優れたデザインによって、ブランディングによる付加価値をつけるという面は極めて少なく、ユーザーに対して「伝える軸」となる面が異なります。
ネットショップにおけるウェブページデザインのポイント
普段あまり触れないデザイン面について書いていきます。弊社にはあまりウェブデザインという概念がありません。ウェブでの動きの面白みを最大限に活かすには、jQueryなどで表現の幅を広げることはできます。しかしながら、ウェブサイトにできる、数ある表現の中で、もっとも情報量が多いのは手書きや自然の形状・色彩です
ウェブデザインにも自然や手書きの要素を
デザイン管理のCSS設定で、EC-CUBEのサイト内のウェブデザインのCSS装飾を行います。EC-CUBEは標準で、bloc.css、bloc_alpha.css、common.css、contents.css、import.css、popup.css、print.css、reset.css、table.cssのCSSファイルがありますが、これらのCSSファ
EC-CUBE CSS設定 [ECサイト・ネットショップ]
デザイン管理 ブロック設定では、ECサイト（ネットショップ）の各ページに表示させるブロックを登録、編集することができます。ブロックは、ヘッダーログイン、サイドバーコンテンツなど、サイト内で共通して使用できるサイトパーツになります。 各ページでのブロックの配置はレイアウト設定で編集を行います。ブロックの配置については、「レイアウト設定」でマウスのみの操作で設定
EC-CUBE ブロック設定 [ECサイト・ネットショップ]
デザイン管理 レイアウト設定では、TOPページ、商品一覧ページ、商品詳細ページなど、ECサイト（ネットショップ）の各ページのレイアウトをブロックごとにドラッグ、ドロップで編集することができます。 EC-CUBEは、マウスのみの簡単操作でレイアウトをカスタマイズすることができます。 サイト内の各要素につき、ブロックごとでのレイアウト設定をすることができます。
EC-CUBE レイアウト設定 [ECサイト・ネットショップ]
ウェブ用カラーの一覧（背景黒 ウェブ用カラーネームとHEX値）です。 ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。このページでは、背景色とフォント色の関係の確認のために、フォントサイズ20p
Color name & HEX font-size 20px 背景色 black
ウェブ用カラーの一覧（背景シルバー ウェブ用カラーネームとHEX値）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。このページでは、背景色とフォント色の関係の確認のために、フォントサイズ2
Color name & HEX font-size 20px 背景色 silver
ウェブ用カラーの一覧（背景白 ウェブ用カラーネームとHEX値）です。 ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。このページでは、背景色とフォント色の関係の確認のために、フォントサイズ20
Color name & HEX font-size 20px 背景色 white
ウェブ用カラーの一覧（white～gray～black）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「gray」などの色の名前とHEX値（16進法）でのカ
Color name & HEX 7 white～gray～black
ウェブ用カラーの一覧（mistyrose～beige～snow）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「beige」などの色の名前とHEX値（16進
Color name & HEX 6 mistyrose～beige～snow
ウェブ用カラーの一覧（mediumpurple～magenta～mistyrose）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「magenta」などの色
Color name & HEX 5 mediumpurple～magenta～mistyrose
ウェブ用カラーの一覧（steelblue～cyan～blue～mediumslateblue）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「blue」など
Color name & HEX 4 steelblue～cyan～blue～mediumslateblue
ウェブ用カラーの一覧（lawngreen～green～cadetblue）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「green」など色の名前とHEX値
Color name & HEX 3 lawngreen～green～cadetblue
ウェブ用カラーの一覧（tan～yellow～darkkhaki）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「yellow」などの色の名前とHEX値（16
Color name & HEX 2 tan～yellow～darkkhaki
ウェブ用カラーの一覧（red～darkorange）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「red」などの色の名前とHEX値（16進法）でのカラーの
Color name & HEX 1 red～darkorange
Webフォントは、ホームページ制作においてCSS3.0 fonts moduleで実装可能になったウェブ上からフォントを表示する技術で、Google Web Fontsなどではフォントを選択するとウェブフォントのCSSを提供されるため、それを呼び出すだけで実装することができます。日本語フォントはひらがなとカタカナしか対応していないものもあるため利用の際には注
Webフォント Web制作|ホームページ制作用語
アルファ、アルファ値は、ウェブにおいて、指定要素の透明度、透過情報を意味します。ホームページ制作においては、ホームページに設置した画像の透明度を指定します。マウスカーソルのホバーによって透明度を変えることによって画像リンクなどをわかりやすくする場合などに用いられます。 要素のアルファ値の指定 ホームページ制作における要素のアルファ値の指定は、CSSにおいて色
アルファ/アルファ効果 Web制作|ホームページ制作用語
ロールオーバーは、ホームページ（ウェブサイト）においては、アンカー（リンク）箇所にマウスポインタを合わせた時に、テキスト色や背景色、リンク画像などが切り替わるウェブでの表現のことです。ホームページ制作において画像リンクなどをわかりやすくするために用いられるWeb技法です。通常の画像と画像リンクを区別することでユーザービリティを高めることができます。 リンクで
ロールオーバー Web制作|ホームページ制作用語
サムネイル画像（thumbnail）は、ホームページ（ウェブサイト）において画像を表示する際に、元の画像を縮小して小さく表示する画像です。ホームページ制作において大きい画像が連続して配置されるとウェブページの高さが膨大になる時などに使用します。なおサムネイルとは親指の爪いった意味であるため、サムネイル画像とは親指の爪のような大きさの小さくて簡潔な画像といった
サムネイル画像 Web制作|ホームページ制作用語
Light Box（ライトボックス）は、ホームページ制作においてjQueryなどで実装される、サムネイル画像などをクリックするとポップアップのように拡大画像が表示される機能です。 製品の紹介ページなど、必要に応じて画像を拡大して表示させることが求められる場合に適しています。 サムネイルとライトボックス サムネイル画像などを設置してウェブページのでの画像表示領
Light Box Web制作|ホームページ制作用語
スライドショー（スライダー）は、ホームページ制作においてウェブサイトのトップページなどに設置される、複数枚の画像をスライドさせて表示する仕組みです。表示領域としては一枚の画像スペースで、複数枚の画像を表示できるため、ウェブページの表現力が高まります。ホームページ制作においてはサイトトップページなどに組み込まれることが多いでしょう。 複数の画像を設置することに
スライドショー（スライダー）Web制作|ホームページ制作用語
アイキャッチ画像（ヘッダ画像）は、ホームページ制作においてウェブページのコンテンツ部分の最上部などに設置される、そのページのイメージを伝えるための「目を引く画像」です。イメージ画像やキャッチフレーズなどのテキストを埋め込んだ画像がよく利用されます。 WordPressにおいては、ページ表示用のアイキャッチ画像設定機能のほか、ソーシャル用アイキャッチのカスタマ
アイキャッチ画像（ヘッダ画像）Web制作|ホームページ制作用語
HEXは、ウェブページのデザインにおいて、CSSなどのスタイルシートでウェブカラーを16進法（0から9、aからf）で指定・記述する方法です。ホームページ制作においては色の値を指定する場合にこのHEXを使用します。なお、HEXは16進法を意味する「hexadecimal」からこの表記がなされています。 HEXの表現方法 HEXの色表現には、先頭にハッシュ記号（
HEX Web制作|ホームページ制作用語
PNG（Portable Network Graphics、ポータブル・ネットワーク・グラフィックス）は、ホームページ制作（ウェブサイト制作）でもよく使用されるビットマップ画像を扱う画像ファイルフォーマットで、圧縮による画質の劣化のない可逆圧縮が可能です。拡張子は、.png。ややファイルサイズは大きめですが背景の透過が可能です。 PNG透過情報とファイルサイ
PNG Web制作|ホームページ制作用語
JPEG（Joint Photographic Experts Group、ジェイペグ）は、ホームページ制作（ウェブサイト制作）でもよく使用される画像圧縮方式のひとつで、一般的に非可逆圧縮の画像フォーマットです。通常の写真に適した形式ですが、背景の透過はできません。 JPEGの特徴 JPEGは、GIFなどに比べて、写真などの圧縮に適しています。拡張子は.jp
JPEG Web制作|ホームページ制作用語
GIFアニメーションは画像ファイルであるGIFを利用したアニメーションで、一つのGIFファイルの中に複数の画像（GIF）を組み込んで連結させ、これらを連続して描画することでアニメーションを可能にしています。各画像への切り替えまで時間、アニメーションループなども設定することができます。 ホームページ制作においてGIFアニメーションを利用することで、軽量で動きの
GIFアニメーション Web制作|ホームページ制作用語
GIF(Graphics Interchange Format)は、ホームページ制作（ウェブサイト制作）で使用する画像ファイルで、画像データ圧縮ファイル形式です。拡張子は「.gif」。ファイルサイズが小さめで、背景の透過が可能です。 GIFの特徴 透過情報や256色までの画像をロスレス圧縮することが可能で、色は2（モノクロ）から256までの間の2の乗数の値で
GIF Web制作|ホームページ制作用語
ワイヤーフレームは、ホームページ（ウェブサイト）の設計図面のようなもので、ウェブサイトを構成する各パーツであるヘッダー・コンテンツ・サイドバー・フッターといったレイアウト的な側面や色調、ウェブサイトのコンテンツのツリー構造などを示したものです。 本格的なホームページ制作業務に入る前に、依頼者と制作者の意思のズレを防ぐために利用されます。手書きで構成された概要
ワイヤーフレーム Web制作|ホームページ制作用語
エラスティックレイアウトは、ウェブサイト・ホームページのレイアウト設計において、ウェブページの横幅を文字数によって決定にする可変レイアウトのウェブデザインです。ホームページのレイアウト幅を文字数で設定するため、フォントサイズによってページの横幅が変わります。 カテゴリ別 Web制作/ホームページ制作用語集 ホームページ制作・Webデザインの1ポイント エラス
エラスティックレイアウト Web制作|ホームページ制作用語
ソリッドデザイン/ソリッドレイアウトは、ホームページ（ウェブサイト）のレイアウトにおいて、ウェブブラウザ幅が変更されてもコンテンツ表示サイズは一定であるように設計された「固定幅」のウェブデザインです。 なお、ブラウザ幅によってコンテンツ幅が可変するものは、リキッドデザイン/リキッドレイアウトと呼ばれます。 カテゴリ別 Web制作/ホームページ制作用語集 ホー
ソリッドデザイン/ソリッドレイアウト Web制作|ホームページ制作用語
リキッドデザイン/リキッドレイアウトは、ホームページ（ウェブサイト）のレイアウトにおいて、ウェブブラウザ幅をに合わせてコンテンツ表示サイズも変更されるように設計されたサイズ可変のウェブデザインです。 なお、ブラウザ幅によってコンテンツ幅が変わらないものは、ソリッドデザイン/ソリッドレイアウトと呼ばれます。 カテゴリ別 Web制作/ホームページ制作用語集 ホー
リキッドデザイン/リキッドレイアウト Web制作|ホームページ制作用語
