2012.12.08 「Webデザインハンズオンセミナー」前半座学編スライド

はじめに
1987.12.24生まれ
名古屋市内の広告会社にてデザイナーとして勤務。
名刺・ポストカードから、ECサイト・スマートフォンサイトの制作まで、
紙媒体、WEB媒体に関わらず幅広く制作に携わる。
また、個人の活動においても、パフォーマンス作品や実験的なWEBサイト、
アート色の強いグラフィック作品などの制作も精力的に行っている。

はじめに
制作実績Result
Theme.0
http://www.slimgate.com/ http://www.iwa-ki.com/

はじめに
http://www.ymc.gr.jp/olive/ http://www.tokai-yakei.com https://itunes.apple.com/us/app/
hofukuzenshin/id510663468?mt=8
制作実績Result
Theme.0

はじめに
その他、紙媒体、WEB媒体
問わず多くの作品がありますが、
割愛します。
制作実績

WEBデザインをする前に、知っておきたい基礎知識
テーマ1.
WEBデザインをする前に
知っておきたい基礎知識

1.急成長を遂げるWEBメディア
2.デバイスの変化によるSNSの普及
(企業にとってのWEBの価値)
(個人にとってのWEBの価値)

1.急成長を遂げるWEBメディア (企業にとってのWEBの価値)
人口に占めるネットユーザーの割合
出典：

人口に占めるネットユーザーの割合
出典：
創業
創業
※wikipediaやSNSの登場
サービス開始
i-mode
サービス
開始

インターネットがもたらした購買行動の変化
注意興味欲求記憶購買

注意興味購買

注意興味検索購買共有

媒体別広告費の伸び率
出典：電通「媒体別広告費の伸び率」

2.デバイスの変化によるSNSの普及 (個人にとってのWEBの価値)
ソーシャルメディア利用者数の推移
出典：総務省「ソーシャルメディア利用者数の推移」

ソーシャルメディア利用者数の推移
出典：総務省「ソーシャルメディア利用者数の推移」
さらに、その中でも
Twitter：40.0％
Facebook：33.5％が
スマートフォンからの利用！
http://www.impressrd.jp/news/120612/iwp2012

そもそもこのセミナーだって、
TwitterとFacebookでしか宣伝していません！

1.IT企業と言ってもやってることは多種多様
3.就職したい！そんな君へちょっとしたヒントを～
2.ディレクター?アートディレクター?Webデザイナー?
　たくさんあるよ。横文字職種。

大きく分類すると大体この4つに当てはまる。
※もちろん複合する企業もある。

主な企業例
※数えきれないほど多く存在します。もちろんTwitter社、Facebook社なんかもこの分類。

主な企業例
※あくまで会社概要と今までの業界経験から分類しています。広告代理店はここの分類。

主な企業例
※完全に僕個人の趣味で選んでいます。今回はデザインの素晴らしい会社さんを紹介していますが、
　「Flashに強い」や「ECに強い」会社もあります。

主な企業例
※ホスティングサービスの会社もどちらかと言えばここの分類。

よくわからん！

2.ディレクター?アートディレクター?Webデザイナー?たくさんあるよ。横文字職種。
一般的な仕事の流れ

クライアントから案件を受注してくる
仕事。WEBは少し特殊で、WEBサイ
ト自体がその役割をすることも。
また価格が不透明かつ無形なものを商
材とするため非常に難易度も高い。

営業の受注してきた案件の課題（売上を伸
ばしたいなど）に対して解決策を提案する
仕事。高いヒアリング能力とWEBマーケテ
ィング知識が必要となる職種。
プロジェクト自体を管理するため、予算やス
ケジュールに関しても仕切る場合が多い。

ディレクターと課題・提案内容を共有し、ア
ート面（ビジュアル面）に関して提案を行う。
またデザイナーにそれらを伝え、プロジェク
ト全体のデザイン感や方向性がそれないよ
う取りしきる役割。
ADと略されるケースも多い。
ディレクターはCD(クリエイティブディレクター)。
なおなお、TV業界のADはアシスタントディレクター。

アートディレクターの決定した方向性に従
って、実際にビジュアル面を制作していく。
会社規模にもよるが、ひたすらWEBのデザ
インのみを行う場合もあるが、紙媒体の制
作や次に紹介するマークアップ業務などを
兼任する場合も中小規模なんかの会社では
多い。

デザイナーの作成したデザインデータを、
HTMLやCSS、Javascriptを駆使しWEBデー
タとして実装していくポジション。
別名フロントエンドエンジニアやコーダーとも
呼ばれる。
※Javascriptの再注目により、現在枯渇気味な職種。

マークアップエンジニアの使用するHTMLや
CSS、Javascriptの言語では実装できない「ロ
グイン機能」や「決済機能」などを盛り込む際
にそれを開発する役割。（開発言語としては、
PHPやRuby、C言語、Javaなど）
別名として別名として、先ほどのフロントエンドエンジニ
アに対してバックエンドエンジニアとも呼ばれ
る。

WEBサイトなどで必要となる”キャッチコピー
”や ”ページ内の文章”を考える仕事。
中小規模の会社では、サイトの構成を考えるデ
ィレクターが兼任する場合が多い。

WEBサイト内で必要となる挿絵などのイラス
トを描くプロ。
イラストの描けるデザイナーもいるが、多くは
そのテイストに合わせてフリーランスで活躍
している方にお願いするケースが大半。

ビジュアル面で必要となるイメージ写真を撮
影するプロフェッショナル。
こちらも撮影したい内容に合わせてプロの方
にお願いするのが一般的だが、まれにコストや
スケジュールの都合でカメラが得意なデザイナ
ーが撮影するケースも...。

先ほど、ディレクターやアートディレクターの紹介でWEBサイトの
構成について少し触れました。
現場ではその構成になるものを「ワイヤーフレーム」と通称呼んで
います。
また、WEBサイトにどんなページが必要か？どのページからどの
ページに遷移した方が分かりやすいかなどを図式化したものを、「
サイトマップ」と読んでいます。
ワイヤーフレーム、サイトマップについて

ワイヤーフレーム見本

ワイヤーフレーム見本
どこにどの要素を
配置するのかを図示
ワイヤーフレームの
形式はイラストレータ、
エクセル、パワポなど様々。

サイトマップ見本

サイトマップ見本
ユーザーが使いやすいように
WEBサイトの導線を考える。
サイトマップを元に
サイト制作の見積もりを
作成する。

先ほども紹介したようにWEB業界で働きたい！と言っても
、その内容は様々です。多くの人に利用されるようなWEB
サービスの制作の一員に携わりたいのか、地域の人に直接
喜ばれるような仕事がしたいのか、一人である程度できる
ようになりたいのか、など色々あると思います。
自分に正直になって、思う方向に挑戦した方が良いです。
漠然とWEBというだけでは、続かないかもしれません。

これ過去の自分自身も含めて結構できていないデザイナー
の方多いです。僕が面接官なら絶対に聞きます。その上で
ポートフォリオも見ます。（言っていることと合っているの
か？など）

受験する会社によってポートフォリオも工夫した方がいい
でしょう。即戦力を求めているのか、それとも将来有望な
デザイナーを育てたいのかでも見るポイントは変わってき
ます。
※WEB作品だとしてもポートフォリオは紙媒体で郵送した
方が絶対に印象は良いです。（見る状況・環境）

1.インターネットの歴史
2.どういう仕組みでインターネットって、
　見れてるの？

冷戦時代アメリカが「ARPANET」というネットワーク技術を考案。
これがインターネットの全身と呼ばれている。

ARPANETの技術を利用した「NSFNet」と呼ばれる
ネットワークが構築され、大学や研究機関にて利用される。

インターネットの生みの親、ティム・バーナーズ=リーが
wwwの起源となる文書交換システムを提案。翌年、同氏が、
世界初のWebブラウザとなる「WorldWideWeb」を開発。

当時のアメリカ副大統領のアル・ゴア氏の
「情報スーパーハイウェイ構想」によってインフラが整備される。

当時のアメリカ副大統領のアル・ゴア氏の
「情報スーパーハイウェイ構想」によってインフラが整備される。
その後1995年、Microsoft社の
Windows95の登場によって、爆発的に
インターネットは広まっていった。

2.どういう仕組みでインターネットって見れてるの？

あれ...?ちょっと待てよ?
それじゃあ他人のパソコンのデータを
直接見に行くってこと?

あれ...?ちょっと待てよ?
それじゃあ他人のパソコンのデータを
直接見に行くってこと?
ここで「サーバー」の出番です！

サーバとは？
ユーザーからの要求に対して何らかのサービスを提供するシステムの
ことである。(wikipediaより抜粋)

サーバとは？
ここまでは
さっきと一緒

サーバとは？
ここまでは
さっきと一緒
一般的なPCと
違うのは...

サーバとは？
ここまでは
さっきと一緒
一般的なPCと
違うのは...
連続稼働性・信頼性・設備が違う！
24時間365日停止しない性能個々の部品の信頼性災害などから守る場所

サーバとは？
ここまでは
さっきと一緒
一般的なPCと
違うのは...
ちなみに見た目はこんな感じです

サーバとは？
ここまでは
さっきと一緒
一般的なPCと
違うのは...
ちなみに見た目はこんな感じです
一般的なPCからサーバとしての
機能以外を排除した非常にシンプルな
見た目です。

なるほど～。
あれ...?もう一つ待てよ?
そのサーバーまでは、
さっきのIPアドレスで辿り着くの？
ここで「ドメイン」の出番です！

ドメインとは？
先ほどの000.000.0.0.のようなIPアドレスをwww.google.co.jpの
ように人間にわかるような形に変換したもの。
主なドメインには、
.com、.co.jp、.jp、.net、.orgなどがあり、
それぞれのドメインには意味合いや規則もある。
.co.jp→ 会社がきちんと存在しているかの証明が必要。
.com → Companyの略だが証明は必要なし。.jp→ 日本　など...

FTPソフトについて

FTPソフトについて
FTPソフトとは、WEBデータ(HTMLなど)を
自分のPCからサーバーへアップロードするためのソフト
MAC用無料FTPソフト
「Cyberduck」
WINDOWS用無料FTPソフト
「FFFTP」

1.知っていないと話もできない?part.1
(WEBサイトの価値・値段)
(いっぱいあるよ。WEB用語)
最低限おさえておきたい！
WEBサイトに関する基礎知識

最低限おさえておきたい！WEBサイトに関する基礎知識
WEBサイトの価値や値段というのは非常に不透明で、相場
感も一般的には良く知られていないのが現状です。
基本的には制作に関わる人間の作業に対する人件費がWEB
サイトの値段というのが一般的です。
例えば、写真も新らしく撮りたい、キャッチコピーもロゴ
もきちんとしたものを作りたい！となった場合、それだけ
値段もかわってきます。

手を抜くわけではなく、
かけられる予算に対して、
ベストなパフォーマンスを
導くのがプロの仕事です。

WEBサイトを作ることで達成したい
目的をしっかり定めることが重要！
WEBサイト制作というと、
デザインばかりに目がいき
がちですが...

例えば、
「とにかく売上を伸ばしたい」
「商品のブランド価値を高めたい」
「会社の信頼性を高めたい」など
この違いでも答えとなる
デザインは変わってきます！

とは言っても...。
もしあなたが発注する立場
だったとしたら、
知りたいですよね！

最低限おさえておきたい！WEBサイトに関する基礎知識Theme.1
Web担当者Forum「ウェブサイト制作の相場早見表」 http://web-tan.forum.impressrd.jp/e/2008/02/20/2456

最低限おさえておきたい！WEBサイトに関する基礎知識Theme.1
Web担当者Forum「ウェブサイト制作の相場早見表」 http://web-tan.forum.impressrd.jp/e/2008/02/20/2456
あくまで相場。
地域差や発注する相手の
会社規模によっても
大きく差がある。

WEBの世界はめまぐるしいスピードで日々新しい技術やサー
ビスが登場しています。
そのため、すべてを網羅することは現実的ではありません。
僕らでも不可能です。
しかし、最低限知っておいた方がよい用語がありますので、
ご紹介します。

・ドメイン、サーバ・ベクターデータ
・SEO
・リスティング広告
・アクセス解析
・ユーザビリティ
・CMS
・バナー
・ブラウザ
・HTML
・ランディングページ

・ドメイン、サーバ・ベクターデータ
・SEO
・リスティング広告
・アクセス解析
・ユーザビリティ
口頭説明します！
・CMS
・バナー
・ブラウザ
・HTML
・ランディングページ

1.デザインの基礎
いよいよ本題！WEBデザイン
2.WEBとグラフィックデザインの違い
3.WEBデザインのトレンド

a.情報の優先順位
b.レイアウト
c.配色
d.フォント選び

例：非リア充だけで楽しもう！
X’masParty2012atSakae
出演：DJDAREKA、DJSONOHOKA
PRICE：2,000yen

例：
情報に順位を
付けてみてください！
非リア充だけで楽しもう！
X’masParty2012atSakae
PRICE：2,000yen

PRICE：2,000yen
① ...イベントのタイトルX’masParty2012
atSakae

PRICE：2,000yen
①
②
...イベントのタイトル
...イベントのキャッチコピー
X’masParty2012
atSakae

PRICE：2,000yen
①
③
③
同
列
順
位
③
②
...イベントのタイトル
...開催場所
...料金
...出演者
...イベントのキャッチコピー
X’masParty2012
atSakae

c.配色
b.レイアウト

b.レイアウト

これが結構むずかしい...
b.レイアウト

何がおかしいのでしょう?
名刺の例
株式会社WEBDESIGN
デザイナー
岡本偉武 MAIL:pa@dotsupa.com
TEL:090-XXXX-YYYY
b.レイアウト

情報をグループごとに分け、
それぞれのグループに距離を持たせる！
名刺の例
デザイナー
岡本偉武
MAIL:pa@dotsupa.com
TEL:090-XXXX-YYYY
b.レイアウト -近接 -

名刺の例
デザイナー
岡本偉武
MAIL:pa@dotsupa.com
TEL:090-XXXX-YYYY
b.レイアウト -コントラスト -

「文字の大きさを変える」「色に濃淡をつける」
などで情報にコントラスト(差)を与える。
名刺の例
株式会社 WEBDESIGN
デザイナー
岡本偉武
MAIL:pa@dotsupa.com
TEL:090-XXXX-YYYY
b.レイアウト -コントラスト -

名刺の例
デザイナー
岡本偉武
MAIL:pa@dotsupa.com
TEL:090-XXXX-YYYY
b.レイアウト -整列 -

名刺の例
デザイナー
岡本偉武
MAIL:pa@dotsupa.com
TEL:090-XXXX-YYYY
まだなんだか寂しいから
写真を入れたい！

実は見えない線が存在している！
名刺の例
デザイナー
岡本偉武
MAIL:pa@dotsupa.com
TEL:090-XXXX-YYYY

写真が無い場合、この見えない線を
活かしてデザインするのもアリ！
名刺の例
デザイナー
岡本偉武
MAIL:pa@dotsupa.com
TEL:090-XXXX-YYYY

写真が無い場合、この見えない線を
活かしてデザインするのもアリ！
名刺の例
デザイナー
岡本偉武
MAIL:pa@dotsupa.com
TEL:090-XXXX-YYYY
デザイナー
岡本偉武
MAIL:pa@dotsupa.com
TEL:090-XXXX-YYYY
デザイナー
岡本偉武
MAIL:pa@dotsupa.com
TEL:090-XXXX-YYYY

b.レイアウト -反復 -
Theme.1
参考サイト「住まいづくりの情報サイト」パナホーム　http://www.panahome.jp/ie-yakudachi/

Theme.1
>
>反
復>
>

Theme.1
>
>反
復
反
復
>
>
>

b.レイアウト -参考サイト・書籍 -
Theme.1
WEBデザインレシピ 2011/5/5
http://webdesignrecipes.com/web-design-beginner-learning-dtp-design/
デザインのルール、レイアウトのセオリー
MdN出版

b.レイアウト
c.配色

配色はデザインの中でも面白い反面、非常にセンスの問わ
れる作業です。まずは配色に意識して良いサイトをたくさ
ん見ることが一番の近道です。
c.配色
いよいよ本題！WEBデザインTheme.1

配色はデザインの中でも面白い反面、非常にセンスの問わ
れる作業です。まずは配色に意識して良いサイトをたくさ
ん見ることが一番の近道です。
「中国自動車学校」http://www.chugoku-ds.co.jp/　「FestivalRockenSeine」http://www.rockenseine.com/en/
参考サイト「ロフト」http://www.loft.co.jp/　「bikke」http://bikke-bikke.jp/　「Lowdi」https://lowdi.com/
c.配色

優れたWEBデザインを紹介しているアーカイブサイト。
s5-style
http://bm.s5-style.com/
ズロック
http://www.zzrock.net/
c.配色

それでもセオリーを知りたい！
c.配色

色の基本
色相環
赤、黄、緑、青、紫を代表としてその中間の色
を当てはめていった結果、このような輪が出
来る。なお、この輪の反対の色が「補色」と
言われ、お互いの色を引き立てると言われて
います。
c.配色
Shikisoukan
参考：Webクリエイターズマニュアル
「カラーデザインの基本。色の三属性とは？」
http://creators-manual.com/color_foundations/

色の基本
明度サンプル
サンプル
サンプル
サンプル
文字通り明るさの度合いのことです。左のサ
ンプルの場合、このスライドショーの背景が
黒のため、真っ白の明度の高い文字の方が読
みやすいですよね。この読みやすさを可読性
とも言います。
c.配色

色の基本
彩度サンプル
サンプル
サンプル
サンプル
こちらも文字の通りですが、色の
鮮やかさを表します。彩度のもっ
とも高い色を原色または純色と呼
びます。
彩度を下げていくと、徐々に色味
を感じなくなり、最終的にはグレ
ーとなります。
c.配色
参考：Webクリエイターズマニュアル
「カラーデザインの基本。色の三属性とは？」
http://creators-manual.com/color_foundations/
Saido

色の基本を理解したら、
次にベースカラーを決定する。
c.配色

c.配色
恐怖・高級感・男性的
情熱的・衝動的・暴力
家庭・暖かい・深い知恵
好奇心・幸福・軽快
穏やかさ・自然・協調
清潔・美しさ・純粋
清潔感・涼しさ・透明感
安全・誠実・冷静
高貴・優雅・非現実的
女性的・うららかさ

c.配色
恐怖・高級感・男性的
情熱的・衝動的・暴力
家庭・暖かい・深い知恵
好奇心・幸福・軽快
穏やかさ・自然・協調
清潔・美しさ・純粋
清潔感・涼しさ・透明感
安全・誠実・冷静
高貴・優雅・非現実的
女性的・うららかさ
RGBのパレットから
選ぶのでどうしても
彩度の高い色を選びがち...

デザインの優れたサイトが
どんな色を使っているのか知ろう！
c.配色

デザインの優れたサイトが
どんな色を使っているのか知ろう！
GoogleChromeの
拡張機能(アドオン)で
ColorPickerと検索！
c.配色

ベースカラーが決まったら配色を考えよう！
c.配色

ドミナントカラー配色
ドミナントトーン配色
トーンオントーン配色
トーンイントーン配色
トーナル配色...
c.配色

ドミナントカラー配色
ドミナントトーン配色
トーンオントーン配色
トーンイントーン配色
トーナル配色...
c.配色
むずかしそう...

そんな方におすすめ！
配色を自動化するツールがあります。
「kuler」https://kuler.adobe.com/
c.配色

そんな方におすすめ！
配色を自動化するツールがあります。
「kuler」https://kuler.adobe.com/
Analogous：類似色
Monochromatic：モノクロ，単色
Triad：トライアッドなど
自動で配色してくれます！
c.配色

1.デザインの基礎 c.配色 -参考サイト・書籍 -
ノンデザイナーのための配色理論
http://www.slideshare.net/saucerjp/ss-14902681
ウェブ配色決める!チカラ
坂本邦夫著

最後にフォントについて少し紹介します。デザインにおいてフ
ォントは、ユーザーに言葉としての意味を伝えるだけでなく、
書体の形や大きさ、太さなどから、感覚的な情報も伝えます。

明朝体/セリフ体
書体選び
Fonts
書体選び
ゴシック体/サンセリフ体

書体選び
Fonts
書体選び
書体選び
Fonts
書体選び
Fonts
はね・はらい有りはね・はらい無し

書体選び
元気・若々しい印象
書体選び
Fonts
おごそかで上品な印象

1.デザインの基礎 d.フォント選び
明朝体/セリフ体（日本語）
カタオカデザインワークス
「まるみんオールド」
有限会社エイワン「ZENオールド明朝」
株式会社モリサワ「リュウミン」
株式会社モリサワ「A1明朝」
日本語フォントだと
このあたりが人気！

明朝体/セリフ体（英語）
WebDesign Century
WebDesign
WebDesign Times
Georgia
英
語
フ
ン
ト
だ
と
こ
の
あ
た
り
が
メ
ジ

ゴシック体/サンセリフ体（日本語）
株式会社モリサワ「新ゴ」株式会社モリサワ「フォーク」
TypeProject「AXISFonts」
視覚デザイン研究所「ロゴG」
株式会社モリサワ「新丸ゴ」
日本語フォントだと
このあたりが人気！

ゴシック体/サンセリフ体（英語）
WebDesign Arial
WebDesign
WebDesign DIN
GillSans
WebDesign Helvetica
英
語
フ
ン
ト
だ
と
こ
の
あ
た
り
が
メ
ジ

行間、カーニング（文字詰め）について
行間を狭めると非常に読みづら
くなりますので注意してくださ
い。行間を狭めると非常に読み
づらくなりますので注意してく
ださい。
行間にこれくらいの余裕がある行間にこれくらいの余裕がある
と見やすくなりますね。適度に
行間をとってデザインしましょ
う。

行間を狭めると非常に読みづら
くなりますので注意してくださ
い。行間を狭めると非常に読み
づらくなりますので注意してく
ださい。
行間にこれくらいの余裕がある行間にこれくらいの余裕がある
と見やすくなりますね。適度に
行間をとってデザインしましょ
う。
こちらの文章は行の右端がそろ
っていなくて非常に気持ちが悪
いですね。きちんと揃えるよう
にしましょう。
やっぱり揃えた方が見栄えがやっぱり揃えた方が見栄えがよ
く読みやすいですよね。文章を
デザインする時はこうあるべき
ですよね！

文字詰めについて

文字詰めについて文字詰めについて文字詰めについて文字詰めについて文字詰めについて文字詰めについて文字詰めについて文字詰めについて

文字のジャンプ率について

「ジャンプ率」とは、一番小さい文字と大きい文字
との差のことを言います。
一般的に、ジャンプ率が小さいほど、”大人っぽさ
や高級感”を表現し、大きいほど、”活発さや子ど
もらしさ”を表します。

ジャンプ率小さめジャンプ率大きめ
「Vermicular（バーミキュラ）」
http://www.vermicular.jp/
「ビックカメラ×ユニクロ PRESENTSビックロベーダー」
http://www.uniqlo.com/bicqlo-vader/

1.デザインの基礎 d.フォント選び -参考サイト・書籍 -
バンクーバーのうぇぶ屋 2011.9.26記事
http://webya.opdsgn.com/webdesign/fontsforwebdesigne/
タイポグラフィの基本ルール
ソフトバンククリエイティブ出版

・情報を探しにきている
・クリックなどの操作が伴う
・マークアップという作業が入る
さて、ダラダラとデザインの基礎についてお話してきまし
たが、WEBデザインとグラフィック（チラシなど紙媒体へ
のデザインのこと)デザインはどこが大きくちがうのでしょ
うか？

・クリックなどの操作が伴う
・マークアップという作業が入る
大きな差はこの3つ！
さて、ダラダラとデザインの基礎についてお話してきまし
たが、WEBデザインとグラフィック（チラシなど紙媒体へ
のデザインのこと)デザインはどこが大きくちがうのでしょ
うか？

参考「HandyCMSLACNE(ラクネ)」
http://lacne.jp/cms/
WEBというメディア検索やリンクから来るた
め、訪問者の多くは何らかの目的を持ってい
ます。
欲しい情報を的確に与えることが、デザイン
において重要となります。
そのため、どのページにどんな情報があるの
か、一目でわかるよう設計されています。

・情報を探しにきている素早く情報に辿り
つけるよう、
デザインされている！
ます。

・情報を探しにきている素早く情報に辿り
つけるよう、
デザインされている！
そしてこのサイト全体のガイド的な役割をするこの部分は、
他のページでも同じ場所で共通して利用される。
ます。

・クリックなどの操作が
　ともなう
違いの二つ目は、クリックなどの操作
がともなうかどうかです。
訪問者がパッと見た瞬間にクリック
するべき場所がどこかわかりやすい
ようデザインされるのが基本です。

　ともなう
グラデーションが
ほどこされ、ボタンだと
認識しやすい！

　ともなう
グラデーションが
ほどこされ、ボタンだと
認識しやすい！
また、少し分かり
づらいが、ボタンの下に
影があるため、浮き出ている
ように見える！

・マークアップという
　作業が入る
前半の方でご紹介したようにWEBは
デザインして終わりではなく、HTML
文書にする必要があります。(要はペ
ージに情報としての構造を持たせるこ
と)
人間に対して分かりやすく表現する人間に対して分かりやすく表現すると
同時に、「検索エンジン」というロボッ
トにも情報を伝える必要があります。

・マークアップという
　作業が入る
<h1>
<li>
<li>
<li> </li>
</li>
</li>
</h1>
マークアップとは、文書に構造を持
たせること。ページの中でどれが何
の要素なのか、どの優先順位で重要
なのかという意味合いを、HTMLタ
グというもので囲んでいくと、検索
エンジンが理解できるようになる。
前半の方でご紹介したようにWEBは
デザインして終わりではなく、HTML
文書にする必要があります。(要はペ
ージに情報としての構造を持たせるこ
と)
人間に対して分かりやすく表現する人間に対して分かりやすく表現すると
同時に、「検索エンジン」というロボッ
トにも情報を伝える必要があります。

参考「神鋼不動産株式会社」http://www.kobelco2103.jp/
WEBサイトの構造について
省略
Tips
Theme.1

省略
Tips
Theme.1
ヘッダー（頭）
フッター（足）
メインイメージ
コンテンツ

省略
Tips
Theme.1
グローバル
ナビゲーション
コンテンツ

省略
Tips
Theme.1
グローバル
メインカラム
コンテンツ
サイドカラム

省略
Tips
Theme.1
グローバル
メインカラム
コンテンツ
サイドカラム
ナビゲーションの位置や
カラムの数はちがえど、
基本構造は大体この
パターンに当てはまる。

レスポンシブWEBデザイン
「NHKスタジオパーク」
http://www.nhk.or.jp/studiopark/
パララックスWEBデザイン
「東京スカイツリー」
http://tokyo-skytree.jp/

ブラウザのサイズに
よって表示が変化する
WEBデザイン。
スマホやタブレットにも
対応している。

ブラウザのサイズに
よって表示が変化する
WEBデザイン。
スマホやタブレットにも
対応している。
画面のスクロールに
よって視差効果を
生み出すのを狙いとした
デザイン。
映像的センスが必要。

WEBデザインをするにあたって必要な環境
デザイン
マークアップ
その他 Fonts書体
マークアップ用の
アプリケーションは
フリーソフトのものでもOK!
例：SublimeTextなど
+ or

実際にデザインしてみよう！
テーマ2.
(座学はここまでです。ここからハンズオン)

課題：クライアントからメールが！
　　　ワイヤーフレームを作ってみよう！

課題：クライアントからメールが！
　　　ワイヤーフレームを作ってみよう！
※太陽工業社は、自動車部品製造メーカーの想定です。（製造業）
「サイトリニューアルの件」
-----
株式会社△△
〇〇様
お世話になっております。
株式会社太陽工業の岡本です。株式会社太陽工業の岡本です。
さて先日お話させていただいた表題の件ですが、
掲載して頂きたい内容を以下に
まとめさせていただきましたのでご確認ください。
デザインのテイストはお任せしますが、
やはり会社としての実績や信頼感というものを考慮し、
ベーシックな形にしていただきたいです。
よろしくお願いします。よろしくお願いします。
【掲載して頂きたい内容】
■会社のロゴマーク、お問い合わせの電話番号と
お問い合わせフォームへのボタン
■メインのイメージに弊社取り扱いの商品の写真。
※添付ファイルのものです。
■キャッチコピー「創業100年の信頼と実績。自動車部品なら太陽工業」
■ページを分けて載せていただきたい内容■ページを分けて載せていただきたい内容
「太陽工業が選ばれる理由」
「製品紹介」
「納品までの流れ」
「スタッフ紹介」
「会社概要」
■ニュース欄
■Facebook（一般的によく見かける顔のたくさん出ているものが良いです）■Facebook（一般的によく見かける顔のたくさん出ているものが良いです）
■その他、プライバシーポリシー、採用情報、よくある質問
以上となります。また何か不明点等あれば、ご連絡ください。
それでは、よろしくお願いします。

EveOkamoto
Twitter/@eveokamoto
Facebook/EveOkamoto
Mail/pa@dotsupa.com ThankU!!;-)

2012.12.08 「Webデザインハンズオンセミナー」前半座学編スライド

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a 2012.12.08 「Webデザインハンズオンセミナー」前半座学編スライド

Semelhante a 2012.12.08 「Webデザインハンズオンセミナー」前半座学編スライド (20)

2012.12.08 「Webデザインハンズオンセミナー」前半座学編スライド