ウェブデザイナーのための実用的なデザインとコーディングテクニック集

サイト構築 -制作

Post on:2010年10月14日

1. 複数の項目がある棒グラフのエフェクト

下記のサイトで使用している棒グラフでは、上：タグの種類と数、下：コメントのついた記事と数、をそれぞれ素晴らしいエフェクトで実装しています。

こういった数値化されたデータは、ユーザーに対して有用なコンテンツの手がかりを提供し、ユーザビリティを改善することにもなります。

Dribbble

Engadget

実装のポイント

項目をリスト化し、レイアウトします。
エフェクトを実装するためには、プレーンな(X)HTMLとCSSを使用します。
数はダイナミックに取得し、スタティックに配置をします。

棒グラフの特徴

ダイナミックにタグやコメントの数を読み込みます。
最も数が高い項目を決めます。
数に対応した水平のバーを作成します。
量に合わせて、順にバーを組織化します。

棒グラフの実装

最初はダイナミックなデータは無しで実装して、棒グラフのエフェクトを確認します。
スタティック版の完成後、PHPでダイナミックなデータを取得する版を実装します。
※HTML, CSS, PHPのコードは元記事やデモページを参照ください。

デモページ

2. ホバー時に追加情報を表示

下記のサイトでは、記事の下にあるアイコンをマウスホバーすると、記事の日付や続きを読むリンクが表示されます。これは最初に表示される必要のない一部のコンテンツを隠すことで、重要なコンテンツをさらに強調させています。

ウェブサイトにミニマリズムの魅力をもたせ、しかも豊かな機能性を提供することもできます。さらに、このデザインのテクニックは重要なコンテンツを際立たせる効果もあります。

CSS-Tricks

実装のポイント

このエフェクトは、よく見かけるホバー時に画像が変わるものに比べて複雑に見えるかもしれませんが、考え方は同じです。

ホバーが反応する範囲はできるだけ大きくし、記事のどんな箇所でもホバーをしたらエフェクトが起きるようにします。
ホバー時に表示されるコンテンツは、日付とコメント、続きを読む、の2つのセクションがあります。
マウスを移動したと同時に、記事は元の状態に戻ります。

実装

スクリプトにjQueryを使用して、簡単に実装することができます。画像を変える際にはimg要素を使用しますが、ここではdiv要素を使用します。

※HTML, CSS, JavaScriptのコードは元記事やデモページを参照ください。

デモページ

[ad#ad-2]

3. カテゴリごとに異なるカラーを適用

下記のサイトではカテゴリごとに異なるカラーを与え、グルーピングをより分かりやすくし、より容易なナビゲーションを実現しています。

異なるカラーはカテゴリに適用するだけでなく、人気の高い記事に適用するとユーザーが注目を集めている記事を見つけやすくするでしょう。

EMPRNT

実装のポイント

これをうまくやるためには、まずカテゴリのためのカラーを決め、それぞれのカテゴリのidを確認し、CSSのスタイルを適用するclassを合わせる必要があります。

実装

最初はPHPを使用せず、(X)HTMLとCSSだけでスタティックなものを作成します。

スタティック版の完成後、PHPでダイナミックなデータを取得する版を実装します。
※HTML, CSS, PHPのコードは元記事やデモページを参照ください。

デモページ

4. ちょっと面白い画像のキャプション

ここで紹介するソリューションはシンプルですが、よく見落とされがちなものです。
画像のスタイルと配置はどんなタイプのウェブデザインでも重要で、そして魅力的なキャプションは同じく不可欠なものです。画像のキャプションにはスタンダードといわれる不変の方法がありません。ここで紹介するものはほんのちょっとだけ創造力を必要とするものです。

Boagworld

UX Booth

(X)HTML

画像とキャプションをdiv要素で内包します。divにはclassを使用します、これはサイト内・ページ内で何度も使用するためです。

&lt;div&nbsp;class=&quot;image-caption&quot;&gt;
&lt;img&nbsp;src=&quot;images/testimage.jpg&quot;&nbsp;alt=&quot;Test&nbsp;Image&quot;&nbsp;/&gt;
&lt;p&gt;Here&nbsp;is&nbsp;the&nbsp;image&nbsp;caption&nbsp;text,&nbsp;and&nbsp;a&nbsp;&lt;a&nbsp;href=&quot;#&quot;&gt;link&lt;/a&gt;.&lt;/p&gt;
&lt;/div&gt;

<div class="image-caption">

<img src="images/testimage.jpg" alt="Test Image" />

<p>Here is the image caption text, and a <a href="#">link</a>.</p>

</div>

CSS

シンプルなオーバーレイのテクニックをキャプションに使用してみます。ここで重要なポイントは、positionです。「.image-caption」に「relative」を指定し、キャプションには「absolute」を指定し位置を調整します。

.image-caption {
	width: 240px;
	position: relative; }

.image-caption img {
	border: 1px solid #333; }

.image-caption p {
	position: absolute;
	bottom: 5px;
	width: 232px;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
	background: #000;
	padding: 5px;
	color: #fff;
	clear: both; }

.image-caption a {
	color: #fff;
	text-decoration: underline; }

.image-caption a:hover {
	font-style: italic;
}

.image-caption {

width: 240px;

position: relative; }

.image-caption img {

border: 1px solid #333; }

.image-caption p {

position: absolute;

bottom: 5px;

width: 232px;

filter:alpha(opacity=70);

-moz-opacity:0.7;

-khtml-opacity: 0.7;

opacity: 0.7;

background: #000;

padding: 5px;

color: #fff;

clear: both; }

.image-caption a {

color: #fff;

text-decoration: underline; }

.image-caption a:hover {

font-style: italic;

}

キャプションの不透明度は70%にしています。

CSS

キャプションに他のスタイルを加えてみます。ここではHTMLにh1要素で画像のタイトルを加えマークアップをします。

.image-caption {
	width: 240px;
	background: #fff; }
.image-caption img {
	border: 1px solid #aaa; }
.image-caption h1 {
	padding: 0 5px;
	font: bold 10px/1.4em Arial, Helvetica, sans-serif;
	color: #cc0000; }
.image-caption p {
	clear: both;
	padding: 0 5px 10px;
	font: normal 9px/1.45em Verdana, Tahoma, sans-serif;
	color: #444; }
.image-caption a {
	color: #444;
	text-decoration: underline; }
.image-caption a:hover {
	font-style: italic; }

.image-caption {

width: 240px;

background: #fff; }

.image-caption img {

border: 1px solid #aaa; }

.image-caption h1 {

padding: 0 5px;

font: bold 10px/1.4em Arial, Helvetica, sans-serif;

color: #cc0000; }

.image-caption p {

clear: both;

padding: 0 5px 10px;

font: normal 9px/1.45em Verdana, Tahoma, sans-serif;

color: #444; }

.image-caption a {

color: #444;

text-decoration: underline; }

.image-caption a:hover {

font-style: italic; }

下記はごくシンプルなスタイルですが、CSS3の角丸、ボーダーのスタイル、配置の調整を行うとさらに面白いものができるでしょう。

デモページ

5. ウェブのための印刷風デザイン

印刷のデザインを連想させるレイアウトは、スタンダードなウェブのレイアウトからリフレッシュな変化になります。全てのウェブサイトに適していない間に、このテクニックを使うのは確かに魅力的です。

The Bold Italic

上記のサイトでは伝統的なウェブサイトよりも、印刷のように見えるレイアウトとデザインを備えています。

印刷を連想させるデザインは本当にさまざまあり、多くのコーディングのソリューションがあります。しかし、その中でも最善の方法というのがあります。

ウェブデザインは可変であり、印刷は違う

印刷のデザインがクリエイティブに見える理由の一つは、コンテンツがさまざまな幅や高さに順応しなくてもよいことです。ウェブでは、テキスト、画像など他のコンテンツが時々レイアウトを引っ張ってしまい、常に変わってしまいます。

これには、二つの解決方法があります。
一つは、ブログのようにコンテンツが整っていて、あまり変わらないものであるなら、テキスト周りのデザインは比較的自由に行えます。行間、文字間をはじめ、画像や背景の回り込みなど調整が可能です。

スタティックではないコンテンツでは、若干考える必要があります。

コンテンツの幅は、固定されたものが一番良いです。
デザイナーは垂直方法のみ変化することを考えるだけです。
※逆の考え方もあります。高さを固定すると、水平方向のみ変化します。
コンテンツがどのように縮むのか、または膨らむのか、その時に良さそうに見えるであろうデザインを考えるためにブレーンストーミングが必要かもしれません。
できる限りdiv要素を使うのをさけ、常にコードは短く、よりスマートな方法を探してください。

印刷を連想させるデザインでコーディングすることは難しいですが、決して不可能ではありません。コンテンツがどんなに変化しても、大部分は許容範囲でおさまるでしょう。例えば、テキストが200から1,000にはいきなり変わらないでしょう。せいぜい数行のレベルで変化するだけです。

インスピレーションを得る

印刷を連想させるウェブデザインを実現させるために、一つのコーディングのソリューションで実装するのは非常に難しいことです。唯一の解決方法はコーディングの練習を積み、特定のデザインを実装するために最も効率的なソリューションを見つけることです。

下記に紹介するサイトでは、印刷のデザインがどのように実装されているか学ぶ実践的な教科書となるでしょう。

Heart Directed

coldheat.de

@craigmod

おわりに -developersではなく、designers

私たちは自身をdevelopersではなく、designersと呼び、ウェブデザインに素敵なエフェクトを加えることができ、コーディングのわずかな知識で機能性を加えることもできます。これらのエフェクトはいずれも理解することは難しくありません。いくつかは魅力的なビジュアルエクスペリエンスを作り、いくつかはユーザーに多くの情報や機能を提供します。目的が何あれ、それぞれが適切な用途をもっています。