ウェブデザイン

ウェブデザインに関する記事 画像・レイアウト・カラーや動きのある表現など、ウェブサイト(ホームページ)のデザイン面について


ホームページ制作でどこまでリアリティを表現できるか
「ホームページの情報量」ということが話題になる場合、Webにおいては、基本的にテキストや画像の量が情報量になると思います。しかし、情報量が多くても、それが実際のユーザーが感じる情報量の多さとはイコールにはならず、また、情報を複合した「リアリティ」につながるかといえば、単純に検索エンジンのようにはいかないのが実情でしょう。ホームページ制作では、テキストデータが基本になりますが、このメリットは、コンピュータにも解読可能である点です。

ホームページ制作でどこまでリアリティを表現できるか


サイトのユーザビリティとSEOを無視した場合
ユーザビリティは、ウェブユーザーのためのもの、そして、クローラビリティは、ウェブサイトの情報を正確に捉えるためにやってくる検索エンジンクローラーを意識したものです。ユーザビリティやSEOを無視した場合、ウェブサイトの価値は一気に落ちます。これはウェブマーケティングツールとしての価値です。

サイトのユーザビリティとSEOを無視した場合   Recently updated !


手書きのワイヤーフレーム
今回は、またウェブ制作の思い出話について書いていこうと思います。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設定   Recently updated !


デザイン管理 ブロック設定では、ECサイト(ネットショップ)の各ページに表示させるブロックを登録、編集することができます。ブロックは、ヘッダーログイン、サイドバーコンテンツなど、サイト内で共通して使用できるサイトパーツになります。各ページでのブロックの配置はレイアウト設定で編集を行います。ブロックの配置については、「レイアウト設定」でマウスのみの操作で設定す

EC-CUBE デザイン管理 ブロック設定 [ECサイト・ネットショップ]   Recently updated !


デザイン管理 レイアウト設定では、TOPページ、商品一覧ページ、商品詳細ページなど、ECサイト(ネットショップ)の各ページのレイアウトをブロックごとにドラッグ、ドロップで編集することができます。 EC-CUBEは、マウスのみの簡単操作でレイアウトをカスタマイズすることができます。 サイト内の各要素につき、ブロックごとでのレイアウト設定をすることができます。

EC-CUBE デザイン管理 レイアウト設定 [ECサイト・ネットショップ]   Recently updated !



ウェブ用カラーネームとHEX値 背景色 black
ウェブ用カラーの一覧(背景黒 ウェブ用カラーネームとHEX値)です。 ホームページ(ウェブサイト)を制作する際に、画像を用いず枠線や背景色フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。このページでは、背景色とフォント色の関係の確認のために、フォントサイズ20p

Color name & HEX font-size 20px 背景色 black


ウェブ用カラーネームとHEX値 背景色 silver
ウェブ用カラーの一覧(背景シルバー ウェブ用カラーネームとHEX値)です。 ホームページ(ウェブサイト)を制作する際に、画像を用いず枠線や背景色フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。このページでは、背景色とフォント色の関係の確認のために、フォントサイズ

Color name & HEX font-size 20px 背景色 silver


ウェブ用カラーネームとHEX値 背景色 white
ウェブ用カラーの一覧(背景白 ウェブ用カラーネームとHEX値)です。 ホームページ(ウェブサイト)を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。このページでは、背景色とフォント色の関係の確認のために、フォントサイズ20

Color name & HEX font-size 20px 背景色 white



ウェブ用カラーネームwhite gray black
ウェブ用カラーの一覧(white~gray~black)です。 ホームページ(ウェブサイト)を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「gray」などの色の名前とHEX値(16進法)での

Color name & HEX 7 white~gray~black


ウェブ用カラーネーム mistyrose beige snow
ウェブ用カラーの一覧(mistyrose~beige~snow)です。 ホームページ(ウェブサイト)を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「beige」などの色の名前とHEX値(16

Color name & HEX 6 mistyrose~beige~snow


ウェブ用カラーネーム mediumpurple magenta mistyrose
ウェブ用カラーの一覧(mediumpurple~magenta~mistyrose)です。 ホームページ(ウェブサイト)を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「magenta」などの

Color name & HEX 5 mediumpurple~magenta~mistyrose



ウェブ用カラーネーム steelblue cyan blue mediumslateblue
ウェブ用カラーの一覧(steelblue~cyan~blue~mediumslateblue)です。 ホームページ(ウェブサイト)を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「blue」な

Color name & HEX 4 steelblue~cyan~blue~mediumslateblue 


ウェブ用カラーネーム lawngreen green cadetblue
ウェブ用カラーの一覧(lawngreen~green~cadetblue)です。 ホームページ(ウェブサイト)を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「green」など色の名前とHEX

Color name & HEX 3 lawngreen~green~cadetblue


ウェブ用カラーネーム tan yellow darkkhaki
ウェブ用カラーの一覧(tan~yellow~darkkhaki)です。 ホームページ(ウェブサイト)を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「yellow」などの色の名前とHEX値(1

Color name & HEX 2 tan~yellow~darkkhaki



ウェブ用カラーネーム red darkorange
ウェブ用カラーの一覧(red~darkorange)です。 ホームページ(ウェブサイト)を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。 ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。 「カラーネーム」と呼ばれる「red」などの色の名前とHEX値(16進法)でのカラー

Color name & HEX 1 red~darkorange


Webフォント Web制作|ホームページ制作
Webフォントは、ホームページ制作においてCSS3.0 fonts moduleで実装可能になったウェブ上からフォントを表示する技術で、Google Web Fontsなどではフォントを選択するとウェブフォントのCSSを提供されるため、それを呼び出すだけで実装することができます。 サーバー上にあるフォントファイルを利用 通常、ウェブサイトのフォントは、CSS

Webフォント Web制作|ホームページ制作用語


アルファ/アルファ効果 Web制作|ホームページ制作
アルファ、アルファ値は、ウェブにおいて、指定要素の透明度、透過情報を意味します。ホームページ制作においては、ホームページに設置した画像の透明度を指定します。マウスカーソルのホバーによって透明度を変えることによって画像リンクなどをわかりやすくする場合などに用いられます 要素のアルファ値の指定 ホームページ制作における要素のアルファ値の指定は、CSSにおいて色を

アルファ/アルファ効果 Web制作|ホームページ制作用語



ロールオーバー Web制作|ホームページ制作
ロールオーバーは、ホームページ(ウェブサイト)においては、アンカー(リンク)箇所にマウスポインタを合わせた時に、テキスト色や背景色、リンク画像などが切り替わるウェブでの表現のことです。ホームページ制作において画像リンクなどをわかりやすくするために用いられるWeb技法です。 リンクであることの強調 ホームページ上のリンク箇所にマウスをあてると、ポインタが切り替

ロールオーバー Web制作|ホームページ制作用語


サムネイル画像 Web制作|ホームページ制作
サムネイル画像(thumbnail)は、ホームページ(ウェブサイト)において画像を表示する際に、元の画像を縮小して小さく表示する画像です。ホームページ制作において大きい画像が連続して配置されるとウェブページの高さが膨大になる時などに使用します。 サムネイル画像でユーザビリティの向上 サムネイル画像を配置して、画像の詳細ページへと移動できるようにしたり、Lig

サムネイル画像 Web制作|ホームページ制作用語


Light Box Web制作|ホームページ制作
Light Box(ライトボックス)は、ホームページ制作においてjQueryなどで実装される、サムネイル画像などをクリックするとポップアップのように拡大画像が表示される機能です。 サムネイルとライトボックス サムネイル画像などを設置してウェブページのでの画像表示領域を小さくしておいて、興味関心のあるユーザーはクリックして拡大することができる仕組みです。 弊社

Light Box Web制作|ホームページ制作用語



スライドショー(スライダー)Web制作|ホームページ制作
スライドショー(スライダー)は、ホームページ制作においてウェブサイトのトップページなどに設置される、複数枚の画像をスライドさせて表示する仕組みです。表示領域としては一枚の画像スペースで、複数枚の画像を表示できるため、ウェブページの表現力が高まります。ホームページ制作においてはサイトトップページなどに組み込まれることが多いでしょう。 jQueryスライドショー

スライドショー(スライダー)Web制作|ホームページ制作用語


アイキャッチ画像(ヘッダ画像)Web制作|ホームページ制作
アイキャッチ画像(ヘッダ画像)は、ホームページ制作においてウェブページのコンテンツ部分の最上部などに設置される、そのページのイメージを伝えるための「目を引く画像」です。イメージ画像やキャッチフレーズなどのテキストを埋め込んだ画像がよく利用されます。 ユーザーの関心を喚起 アイキャッチ画像はウェブページに訪れたユーザーにとって、短時間でページの印象を伝え、アイ

アイキャッチ画像(ヘッダ画像)Web制作|ホームページ制作用語


HEX Web制作|ホームページ制作
HEXは、ウェブページのデザインにおいて、CSSなどのスタイルシートでウェブカラーを16進法(0から9、aからf)で指定・記述する方法です。ホームページ制作においては色の値を指定する場合にこのHEXを使用します。 HEXの表現方法 HEXの色表現には、先頭にハッシュ記号(#)をつけて、その後に16進法の色コードを記述します。ホームページを作成するときもこのコ

HEX Web制作|ホームページ制作用語



PNG Web制作|ホームページ制作
PNG(Portable Network Graphics、ポータブル・ネットワーク・グラフィックス)は、ホームページ制作(ウェブサイト制作)でもよく使用されるビットマップ画像を扱う画像ファイルフォーマットで、圧縮による画質の劣化のない可逆圧縮が可能です。拡張子は、.png。 PNG透過情報とファイルサイズ PNGは、画像に透過情報を含めることができ、また、

PNG Web制作|ホームページ制作用語


JPEG Web制作|ホームページ制作
JPEG(Joint Photographic Experts Group、ジェイペグ)は、ホームページ制作(ウェブサイト制作)でもよく使用される画像圧縮方式のひとつで、一般的に非可逆圧縮の画像フォーマットです。 JPEGの特徴 JPEGは、GIFなどに比べて、写真などの圧縮に適しています。拡張子は.jpg、.jpegです。 一般的に、デジタルカメラやスマー

JPEG Web制作|ホームページ制作用語


GIFアニメーション Web制作|ホームページ制作
GIFアニメーションは画像ファイルであるGIFを利用したアニメーションで、一つのGIFファイルの中に複数の画像(GIF)を組み込んで連結させ、これらを連続して描画することでアニメーションを可能にしています。各画像への切り替えまで時間、アニメーションループなども設定することができます。 ホームページ制作においてGIFアニメーションを利用することで、動きのある表

GIFアニメーション Web制作|ホームページ制作用語



GIF Web制作|ホームページ制作
GIF(Graphics Interchange Format)は、ホームページ制作(ウェブサイト制作)で使用する画像ファイルで、画像データ圧縮ファイル形式です。拡張子は「.gif」。 GIFの特徴 透過情報や256色までの画像をロスレス圧縮することが可能で、色は2(モノクロ)から256までの間の2の乗数の値で指定して保存することができるため、他の画像ファイ

GIF Web制作|ホームページ制作用語


ワイヤーフレーム Web制作|ホームページ制作
ワイヤーフレームは、ホームページ(ウェブサイト)の設計図面のようなもので、ウェブサイトを構成する各パーツであるヘッダー・コンテンツ・サイドバー・フッターといったレイアウト的な側面や色調、ウェブサイトのコンテンツのツリー構造などを示したものです。 本格的なホームページ制作業務に入る前に、依頼者と制作者の意思のズレを防ぐために利用されます。 ワイヤーフレーム制作

ワイヤーフレーム Web制作|ホームページ制作用語


エラスティックレイアウト Web制作|ホームページ制作
エラスティックレイアウトは、ウェブサイト・ホームページのレイアウト設計において、ウェブページの横幅を文字数によって決定にする可変レイアウトのウェブデザインです。ホームページのレイアウト幅を文字数で設定するため、フォントサイズによってページの横幅が変わります。 カテゴリ別 Web制作/ホームページ制作用語集 ホームページ制作・Webデザインの1ポイント エラス

エラスティックレイアウト Web制作|ホームページ制作用語



ソリッドデザイン/ソリッドレイアウト Web制作|ホームページ制作
ソリッドデザイン/ソリッドレイアウトは、ホームページ(ウェブサイト)のレイアウトにおいて、ウェブブラウザ幅が変更されてもコンテンツ表示サイズは一定であるように設計された「固定幅」のウェブデザインです。 なお、ブラウザ幅によってコンテンツ幅が可変するものは、リキッドデザイン/リキッドレイアウトと呼ばれます。 カテゴリ別 Web制作/ホームページ制作用語集 ホー

ソリッドデザイン/ソリッドレイアウト Web制作|ホームページ制作用語


リキッドデザイン/リキッドレイアウト Web制作|ホームページ制作
リキッドデザイン/リキッドレイアウトは、ホームページ(ウェブサイト)のレイアウトにおいて、ウェブブラウザ幅をに合わせてコンテンツ表示サイズも変更されるように設計されたサイズ可変のウェブデザインです。 なお、ブラウザ幅によってコンテンツ幅が変わらないものは、ソリッドデザイン/ソリッドレイアウトと呼ばれます。 カテゴリ別 Web制作/ホームページ制作用語集 ホー

リキッドデザイン/リキッドレイアウト Web制作|ホームページ制作用語


タイポグラフィレイアウト Web制作|ホームページ制作
タイポグラフィレイアウト(typography layout)は、ホームページ(ウェブサイト)において、文字を用いて適切に配列することでウェブページの文字全体の体裁を整えるレイアウト技法です。 レディング、カーニング、ベースラインなどのポイントがあります。 カテゴリ別 Web制作/ホームページ制作用語集 ホームページ制作・Webデザインの1ポイント Webフ

タイポグラフィレイアウト Web制作|ホームページ制作用語



ホームページ制作、サイトカスタマイズなどのお問い合わせ・ご依頼はこちら