特集

Webデザインやhtml制作に関連する事、最近話題になっているサイトなどをピックアップし、お届けします。

Back Number

2012年04月05日
今更聞けないWebのギモン!!~DOCTYPE宣言文って何?~

Webページを作成する際に最初に記述する「DOCTYPE宣言文」。
何のためにあるものなのか、理解できていますか?

2012年07月17日
気になるWebの動向!~HTML5とCSS3って何が違うの?~

最近よく耳にするHTML5とCSS3は今までのHTMLやCSSと何が違うの?
新たに勉強し直さなければいけないの?

2012年07月17日
既存サイトから学ぶWebデザインのコツ ~グローバルナビゲーション~

ユーザがストレスを感じることなく、目的のページにたどり着く為には、どのような事に注意すべきでしょうか。

2012年09月11日
レイアウトの基本1 ~「整列」~

今回は、Webページをデザインする際に気をつけなければならないレイアウトの基本、「整列」についてご紹介します。

知っておきたい!基本のショートカット ~Photoshop編~

2013年02月12日
知っておきたい!基本のショートカット ~Photoshop編~

今回はよく使うと思われるショートカットをまとめてみました。 普段何気なく使っている人も、まだ知らない便利なショートカットがあるかも?

レイアウトの基本2~繰り返し~

2013年03月08日
レイアウトの基本 2 ~繰り返し~

レイアウトの基本1 ~整列~ に引き続き、第2弾!Webだけでなく、デザインする際の基本である「繰り返し」についてご紹介いたします。

レイアウトの基本3 近接

2013年07月05日
レイアウトの基本 3~「近接」~

レイアウトの基本 第3弾!今回は「近接」についてです。近接とは簡単に言うと、近づける事。これをちょっと気にするだけで直感的にわかりやすいデザインになります。

index_img

2013年07月12日
レイアウトの基本4 ~「関係性」~

関係している物は近づける。関係していない物は遠ざける。
今回は、前回の「近接」の補足になる「関係性」について紹介します。

2013年07月12日
夏向けイラスト素材

デジナーレカフェからの御中元!
夏向けのイラストやアイコンの素材を無料でプレゼント。

index_img

2013年07月19日
レイアウトの基本 5 ~白黒配置で目的を明確にする~

レイアウトの基本5は「白黒配置で目的を明確にする」です。
今回は、伝える目的を明確にするレイアウトの方法について、説明したいと思います。

index_img

2013年08月02日
今更聞けないWebのギモン!! ~そもそもHTMLって何?~

言葉は知っていても、何をするのか?何が出来るのか?正体は何?と言う人のために、今回は実はとっても身近なHTMLについて、出来るだけわかりやすい解説で説明したいと思います。

index_img

2013年08月07日
暑中見舞いを作ろう! イラレで作る暑中見舞いレシピ

イラストレータで作るポストカード。
今回は暑中見舞いを作って、皆に送ってしまおうという企画です。

特集一覧ページを見る

Special 特集

2019年04月15日
【フリー素材】手書き植物の素材セット

長いように感じた冬も終わり、柔らかい青葉が芽吹いて春になりました。皆さまいかがお過ごしでしょうか?今回は手書き植物の素材…

Interview インタビュー

2014年10月15日
イラストレーターを目指し活動中!~後編~

※今回は少し趣旨を変えて、織田さんのイラストをページにちりばめました。 学校で広告を学び、色々やってみたくなった。 ─ …

Seminar セミナー

Technic テクニック

2019年02月15日
水彩絵の具ブラシを作成する方法

水彩絵の具のにじみは、アナログ表現の醍醐味ですよね。 綺麗なにじみをデジタルでも表現してみたい!!! そんなあなたに向け…

Books オススメ書籍

センスは知識からはじまる

2019年01月09日
センスは知識から始まる
  • デザイン

デザインをする上で大切な考え方 センスは知識から始まる デザインというと「センスの良さ」が必要だと感じたことはありません…

Award アワード

既存サイトから学ぶWebデザインのコツ ~グローバルナビゲーション~

グローバルナビゲーションとは、Webページ内すべてに共通して使われる、メニューの事です。
その名の通り、ユーザが求めている情報が掲載されているページへナビゲートすることが目的です。

迷わせないナビゲーション

グローバルナビゲーションはWebページ内で共通して使われる為、重要なインターフェースです。
ユーザがストレスを感じることなく、目的のページにたどり着く為には、どのような事に注意すべきでしょうか。
既存サイトのナビゲーションを例にとって、ご紹介したいと思います。
リンク先はリニューアル等によりデザインが変わっている場合があります。

鈴与商事株式会社のデザイン

クリックで大きな画像を開きます。

大きなナビでクリックがしやすく、目に止まりやすいデザインになっています。
「太陽発電を知ろう」など、具体的な内容が書いてあるので、リンク先でどんな情報が得られるのかが分かりやすいです。
また、現在表示しているカテゴリーは下線の色が変わり、今どのカテゴリーに居るのが分かるようになっています。

ミライトパートナーズのデザイン

クリックで大きな画像を開きます。

ターゲットユーザによって他のナビゲーションと違った色を使用しているので、初めて訪れるユーザにも目に止まりやすく、スムーズにターゲット別のページへ誘導することができます。

東京日動あんしん生命のデザイン

クリックで大きな画像を開きます。

ユーザの目的別にナビゲーションを用意しているのに加え、カテゴリに合わせて更に細かなローカルナビゲーションが出てきます。
リピーターは何度もページを移動することなく、目的のページまでスムーズに行く事が出来ます。

おたべ本館 オンラインショップのデザイン

クリックで大きな画像を開きます。

ナビゲーションに商品写真が掲載されているので、探したい商品がどこに行けばあるのかが感覚的にわかります。
べた塗りではなく、背景に扇子のテクスチャを使用しているので、野暮ったくならずにまとまっています。

記事担当者のコメント
サイトに共通するナビゲーションは見た目のデザインをこだわってしまいがちですが、「ナビ」としての機能を果たす為にユーザを迷わせることのない文言を使う事も重要です。