4 生まれ 名古屋市内の広告会社にてデザイナーとして勤務。 名刺・ポストカードから、E C サイト・スマートフォンサイトの制作まで、 紙媒体、WE B 媒体に関わらず幅広く制作に携わる。 また、個人の活動においても、パフォーマンス作品や実験的なWE B サイ ト、 アート色の強いグラフィック作品などの制作も精力的に行っている。
mc . g r . j p / o l i v e / h t t p : / / www. t o k a i - y a k e i . c o m h t t p s : / / i t u n e s . a p p l e . c o m/ u s / a p p / h o f u k u z e n s h i n / i d 5 1 0 6 6 3 4 6 8 ? mt = 8 制作実績 R e s u l t T h e m e . 0
個人にとってのWE B の価値) ソーシャルメディア利用者数の推移 出典：総務省 「ソーシャルメディア利用者数の推移」 さらに、 その中でも T wi t t e r ：4 0 . 0 ％ F a c e b o o k ：3 3 . 5 ％が スマートフォンからの利用！ h t t p : / / www. i mp r e s s r d . j p / n e ws / 1 2 0 6 1 2 / i wp 2 0 1 2
We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ ディレクターと課題・提案内容を共有し、 ア ート面 （ビジュアル面） に関して提案を行う。 またデザイナーにそれらを伝え、 プロジェク ト全体のデザイン感や方向性がそれないよ う取りしきる役割。 A D と略されるケースも多い。 ディレクターはC D ( クリエイティブディレクター) 。 なお なお、 T V業界のA D はアシスタントディレクター。
We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ デザイナーの 作 成した デザインデータを、 HT ML やC S S 、J a v a s c r i p t を駆使しWE B デー タとして実装していくポジション。 別名フロントエンドエンジニアやコーダーとも 呼ばれる。 ※J a v a s c r i p t の再注目により、 現在枯渇気味な職種。
We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ マークアップエンジニアの使用するHT ML や C S S 、J a v a s c r i p t の言語では実装できない「ロ グイン機能」や「決済機能」などを盛り込む際 にそれを開発する役割。 （開発言語としては、 P HP やR u b y 、C 言語、J a v a など） 別名として 別名として、 先ほどのフロントエンドエンジニ アに対してバックエンドエンジニアとも呼ばれ る。
、その内容は様々です。多くの人に利用されるようなWE B サービスの制作の一員に携わりたいのか、地域の人に直接 喜ばれるような仕事がしたいのか、一人である程度できる ようになりたいのか、など色々あると思います。 自分に正直になって、思う方向に挑戦した方が良いです。 漠然とWE B というだけでは、続かないかもしれません。
P A NE T 」というネットワーク技術を考案。 これがインターネットの全身と呼ばれている。 A R P A NE T の技術を利用した「NS F Ne t 」と呼ばれる ネットワークが構築され、大学や研究機関にて利用される。 インターネットの生みの親、ティム・バーナーズ= リーが wwwの起源となる文書交換システムを提案。翌年、同氏が、 世界初のWe b ブラウザとなる「Wo r l d Wi d e We b 」を開発。
P A NE T 」というネットワーク技術を考案。 これがインターネットの全身と呼ばれている。 A R P A NE T の技術を利用した「NS F Ne t 」と呼ばれる ネットワークが構築され、大学や研究機関にて利用される。 インターネットの生みの親、ティム・バーナーズ= リーが wwwの起源となる文書交換システムを提案。翌年、同氏が、 世界初のWe b ブラウザとなる「Wo r l d Wi d e We b 」を開発。 当時のアメリカ副大統領のアル・ゴア氏の 「情報スーパーハイウェイ構想」によってインフラが整備される。
P A NE T 」というネットワーク技術を考案。 これがインターネットの全身と呼ばれている。 A R P A NE T の技術を利用した「NS F Ne t 」と呼ばれる ネットワークが構築され、大学や研究機関にて利用される。 インターネットの生みの親、ティム・バーナーズ= リーが wwwの起源となる文書交換システムを提案。翌年、同氏が、 世界初のWe b ブラウザとなる「Wo r l d Wi d e We b 」を開発。 当時のアメリカ副大統領のアル・ゴア氏の 「情報スーパーハイウェイ構想」によってインフラが整備される。 その後1 9 9 5 年、Mi c r o s o f t 社の Wi n d o ws 9 5 の登場によって、爆発的に インターネットは広まっていった。
ことである。( wi k i p e d i a より抜粋) ここまでは さっきと一緒 一般的なP C と 違うのは. . . 連続稼働性 ・信頼性 ・設備が違う ！ 2 4 時間3 6 5 日停止しない性能 個々の部品の信頼性 災害などから守る場所 ちなみに見た目はこんな感じです 一般的なP C からサーバとしての 機能以外を排除した非常にシンプルな 見た目です。
0 0 . 0 0 0 . 0 . 0 . のようなI P アドレスをwww. g o o g l e . c o . j p の ように人間にわかるような形に変換したもの。 主なドメインには、 . c o m、. c o . j p 、. j p 、. n e t 、. o r g などがあり、 それぞれのドメインには意味合いや規則もある。 . c o . j p → 会社がきちんと存在しているかの証明が必要。 . c o m → C o mp a n y の略だが証明は必要なし。. j p → 日本 など. . .
t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい！WE B サイトに関する基礎知識 WE B サイ トの価値や値段というのは非常に不透明で、相場 感も一般的には良く知られていないのが現状です。 基本的には制作に関わる人間の作業に対する人件費がWE B サイトの値段というのが一般的です。 例えば、写真も新らしく撮りたい、キャッチコピーもロゴ もきちんとしたものを作りたい！となった場合、それだけ 値段もかわってきます。
t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい！WE B サイトに関する基礎知識 WE B サイ トの価値や値段というのは非常に不透明で、相場 感も一般的には良く知られていないのが現状です。 基本的には制作に関わる人間の作業に対する人件費がWE B サイトの値段というのが一般的です。 例えば、写真も新らしく撮りたい、キャッチコピーもロゴ もきちんとしたものを作りたい！となった場合、それだけ 値段もかわってきます。 手を抜くわけではなく、 かけられる予算に対して、 ベストなパフォーマンスを 導くのがプロの仕事です。
t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい！WE B サイトに関する基礎知識 WE B サイ トの価値や値段というのは非常に不透明で、相場 感も一般的には良く知られていないのが現状です。 基本的には制作に関わる人間の作業に対する人件費がWE B サイトの値段というのが一般的です。 例えば、写真も新らしく撮りたい、キャッチコピーもロゴ もきちんとしたものを作りたい！となった場合、それだけ 値段もかわってきます。 WE B サイトを作ることで達成したい 目的をしっかり定めることが重要！ WE B サイト制作というと、 デザインばかりに目がいき がちですが. . .
t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい！WE B サイトに関する基礎知識 WE B サイ トの価値や値段というのは非常に不透明で、相場 感も一般的には良く知られていないのが現状です。 基本的には制作に関わる人間の作業に対する人件費がWE B サイトの値段というのが一般的です。 例えば、写真も新らしく撮りたい、キャッチコピーもロゴ もきちんとしたものを作りたい！となった場合、それだけ 値段もかわってきます。 例えば、 「とにかく売上を伸ばしたい」 「商品のブランド価値を高めたい」 「会社の信頼性を高めたい」 など この違いでも答えとなる デザインは変わっ てきます ！
t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい！WE B サイトに関する基礎知識 WE B サイ トの価値や値段というのは非常に不透明で、相場 感も一般的には良く知られていないのが現状です。 基本的には制作に関わる人間の作業に対する人件費がWE B サイトの値段というのが一般的です。 例えば、写真も新らしく撮りたい、キャッチコピーもロゴ もきちんとしたものを作りたい！となった場合、それだけ 値段もかわってきます。 とは言っても. . . 。 もしあなたが発注する立場 だったとしたら、 知りたいですよね！
t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい！WE B サイトに関する基礎知識 T h e m e . 1 We b 担当者F o r u m「ウェブサイト制作の相場早見表」 h t t p : / / we b - t a n . f o r u m. i mp r e s s r d . j p / e / 2 0 0 8 / 0 2 / 2 0 / 2 4 5 6
t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい！WE B サイトに関する基礎知識 T h e m e . 1 We b 担当者F o r u m「ウェブサイト制作の相場早見表」 h t t p : / / we b - t a n . f o r u m. i mp r e s s r d . j p / e / 2 0 0 8 / 0 2 / 2 0 / 2 4 5 6 あくまで相場。 地域差や発注する相手の 会社規模によっても 大きく差がある。
t . 2 ( いっぱいあるよ。 WE B 用語) WE B の世界はめまぐるしいスピードで日々新しい技術やサー ビスが登場しています。 そのため、すべてを網羅することは現実的ではありません。 僕らでも不可能です。 しかし、最低限知っておいた方がよい用語がありますので、 ご紹介します。 最低限おさえておきたい！WE B サイトに関する基礎知識
t . 2 ( いっぱいあるよ。 WE B 用語) ・ドメイン、 サーバ ・ベクターデータ ・S E O ・リスティング広告 ・アクセス解析 ・ユーザビリティ 口頭説明します ！ ・C MS ・バナー ・ブラウザ ・HT ML ・ランディングページ 最低限おさえておきたい！WE B サイトに関する基礎知識
C E ：2 , 0 0 0 y e n 非リア充だけで楽しもう ！ ① . . . イベントのタイ トル X ’ ma s P a r t y 2 0 1 2 a t S a k a e 出演：D J D A R E K A、D J S ONOHOK A a . 情報の優先順位 いよいよ本題！WE B デザイン
C E ：2 , 0 0 0 y e n 非リア充だけで楽しもう ！ ① ② . . . イベントのタイ トル . . . イベントのキャッチコピー X ’ ma s P a r t y 2 0 1 2 a t S a k a e 出演：D J D A R E K A、D J S ONOHOK A a . 情報の優先順位 いよいよ本題！WE B デザイン
C E ：2 , 0 0 0 y e n 非リア充だけで楽しもう ！ ① ③ ③ 同 列 順 位 ③ ② . . . イベントのタイ トル . . . 開催場所 . . . 料金 . . . 出演者 . . . イベントのキャッチコピー X ’ ma s P a r t y 2 0 1 2 a t S a k a e 出演：D J D A R E K A、D J S ONOHOK A a . 情報の優先順位 いよいよ本題！WE B デザイン
差) を与える。 いよいよ本題！WE B デザイン 名刺の例 株式会社 WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y b . レイアウト - コントラスト -
写真が無い場合、 この見えない線を 活かしてデザインするのもアリ ！ 名刺の例 株式会社WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y b . レイアウト - 整列 -
写真が無い場合、 この見えない線を 活かしてデザインするのもアリ ！ 名刺の例 株式会社WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y b . レイアウト - 整列 - 株式会社WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y 株式会社WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y
b . レイアウト - 参考サイト ・書籍 - T h e m e . 1 WE B デザインレシピ 2 0 1 1 / 5 / 5 h t t p : / / we b d e s i g n r e c i p e s . c o m/ we b - d e s i g n - b e g i n n e r - l e a r n i n g - d t p - d e s i g n / デザインのルール、レイアウトのセオリー Md N 出版
「中国自動車学校」h t t p : / / www. c h u g o k u - d s . c o . j p / 「F e s t i v a l R o c k e n S e i n e 」h t t p : / / www. r o c k e n s e i n e . c o m/ e n / 参考サイト「ロフト」h t t p : / / www. l o f t . c o . j p / 「b i k k e 」h t t p : / / b i k k e - b i k k e . j p / 「L o wd i 」h t t p s : / / l o wd i . c o m/ c . 配色 いよいよ本題！WE B デザイン T h e m e . 1
黄、 緑、 青、 紫を代表としてその中間の色 を当てはめていった結果、 このような輪が出 来る。なお、この輪の反対の色が「補色」と 言われ、お互いの色を引き立てると言われて います。 c . 配色 いよいよ本題！WE B デザイン T h e m e . 1 S h i k i s o u k a n 参考：We b クリエイターズマニュアル 「カラーデザインの基本。色の三属性とは？」 h t t p : / / c r e a t o r s - ma n u a l . c o m/ c o l o r _ f o u n d a t i o n s /
サンプル サンプル サンプル こちらも文字の通りですが、色の 鮮やかさを表します。彩度のもっ とも高い色を原色または純色と呼 びます。 彩度を下げていくと、徐々に色味 を感じなくなり、最終的にはグレ ーとなります。 c . 配色 いよいよ本題！WE B デザイン T h e m e . 1 参考：We b クリエイターズマニュアル 「カラーデザインの基本。色の三属性とは？」 h t t p : / / c r e a t o r s - ma n u a l . c o m/ c o l o r _ f o u n d a t i o n s / S a i d o
u l e r 」h t t p s : / / k u l e r . a d o b e . c o m/ A n a l o g o u s ：類似色 Mo n o c h r o ma t i c ：モノクロ，単色 T r i a d ：トライアッドなど 自動で配色してくれます！ c . 配色 いよいよ本題！WE B デザイン
- 参考サイト ・書籍 - いよいよ本題！WE B デザイン T h e m e . 1 ノンデザイナーのための配色理論 h t t p : / / www. s l i d e s h a r e . n e t / s a u c e r j p / s s - 1 4 9 0 2 6 8 1 ウェブ配色 決める! チカラ 坂本 邦夫 著
F o n t s 書体選び ゴシック体/ サンセリフ体 書体選び F o n t s 書体選び F o n t s はね・はらい有り はね・はらい無し 最後にフォントについて少し紹介します。デザインにおいてフ ォントは、ユーザーに言葉としての意味を伝えるだけでなく、 書体の形や大きさ、 太さなどから、 感覚的な情報も伝えます。 d . フォント選び いよいよ本題！WE B デザイン
元気・若々しい印象 最後にフォントについて少し紹介します。デザインにおいてフ ォントは、ユーザーに言葉としての意味を伝えるだけでなく、 書体の形や大きさ、 太さなどから、 感覚的な情報も伝えます。 d . フォント選び いよいよ本題！WE B デザイン 明朝体/ セリフ体 書体選び F o n t s おごそかで上品な印象
いよいよ本題！WE B デザイン ゴシック体/ サンセリフ体（日本語） 株式会社モリサワ「新ゴ」 株式会社モリサワ「フォーク」 T y p e P r o j e c t 「A X I S F o n t s 」 視覚デザイン研究所「ロゴG 」 株式会社モリサワ「新丸ゴ」 日本語フォントだと このあたりが人気！
いよいよ本題！WE B デザイン ゴシック体/ サンセリフ体（英語） We b D e s i g n A r i a l We b D e s i g n We b D e s i g n D I N G i l l S a n s We b D e s i g n H e l v e t i c a 英 語 フ ン ト だ と こ の あ た り が メ ジ
いよいよ本題！WE B デザイン T h e m e . 1 文字のジャンプ率について ジャンプ率小さめ ジャンプ率大きめ 「V e r mi c u l a r （バーミキュラ）」 h t t p : / / www. v e r mi c u l a r . j p / 「ビックカメラ×ユニクロ P R E S E N T S ビックロベーダー」 h t t p : / / www. u n i q l o . c o m/ b i c q l o - v a d e r /
- 参考サイト ・書籍 - いよいよ本題！WE B デザイン T h e m e . 1 バンクーバーのうぇぶ屋 2 0 1 1 . 9 . 2 6 記事 h t t p : / / we b y a . o p d s g n . c o m/ we b d e s i g n / f o n t s f o r we b d e s i g n e / タイポグラフィの基本ルール ソフトバンククリエイティブ出版
MS L A C N E ( ラクネ) 」 h t t p : / / l a c n e . j p / c ms / 2 . WE B とグラフィ ックデザインの違い ・情報を探しにきている いよいよ本題！WE B デザイン T h e m e . 1 WE B というメディア検索やリンクから来るた め、訪問者の多くは何らかの目的を持ってい ます。 欲しい情報を的確に与えることが、デザイン において重要となります。 そのため、どのページにどんな情報があるの か、一目でわかるよう設計されています。
・マークアップという 作業が入る < h 1 > < l i > < l i > < l i > < / l i > < / l i > < / l i > < / h 1 > いよいよ本題！WE B デザイン マークアップとは、文書に構造を持 たせること。ページの中でどれが何 の要素なのか、どの優先順位で重要 なのかという意味合いを、HT ML タ グというもので囲んでいくと、検索 エンジンが理解できるようになる。 前半の方でご紹介したようにWE B は デザインして終わりではなく、HT ML 文書にする必要があります。( 要はペ ージに情報としての構造を持たせるこ と) 人間に対して分かりやすく表現する 人間に対して分かりやすく表現すると 同時に、 「検索エンジン」というロボッ トにも情報を伝える必要があります。
B デザイン 「NHK スタジオパーク」 h t t p : / / www. n h k . o r . j p / s t u d i o p a r k / パララックスWE B デザイン 「東京スカイツリー」 h t t p : / / t o k y o - s k y t r e e . j p / いよいよ本題！WE B デザイン
B デザイン 「NHK スタジオパーク」 h t t p : / / www. n h k . o r . j p / s t u d i o p a r k / パララックスWE B デザイン 「東京スカイツリー」 h t t p : / / t o k y o - s k y t r e e . j p / ブラウザのサイズに よって表示が変化する WE B デザイン。 スマホやタブレットにも 対応している。 いよいよ本題！WE B デザイン
B デザイン 「NHK スタジオパーク」 h t t p : / / www. n h k . o r . j p / s t u d i o p a r k / パララックスWE B デザイン 「東京スカイツリー」 h t t p : / / t o k y o - s k y t r e e . j p / ブラウザのサイズに よって表示が変化する WE B デザイン。 スマホやタブレットにも 対応している。 画面のスクロールに よって視差効果を 生み出すのを狙いとした デザイン。 映像的センスが必要。 いよいよ本題！WE B デザイン
- 株式会社△△ 〇〇様 お世話になっております。 株式会社太陽工業の岡本です。 株式会社太陽工業の岡本です。 さて先日お話させていただいた表題の件ですが、 掲載して頂きたい内容を以下に まとめさせていただきましたのでご確認ください。 デザインのテイストはお任せしますが、 やはり会社としての実績や信頼感というものを考慮し、 ベーシックな形にしていただきたいです。 よろしくお願いします。 よろしくお願いします。 【掲載して頂きたい内容】 ▪会社のロゴマーク、お問い合わせの電話番号と お問い合わせフォームへのボタン ▪メインのイメージに弊社取り扱いの商品の写真。 ※添付ファイルのものです。 ▪キャッチコピー「創業1 0 0 年の信頼と実績。自動車部品なら太陽工業」 ▪ページを分けて載せていただきたい内容 ▪ページを分けて載せていただきたい内容 「太陽工業が選ばれる理由」 「製品紹介」 「納品までの流れ」 「スタッフ紹介」 「会社概要」 ▪ニュース欄 ▪F a c e b o o k （一般的によく見かける顔のたくさん出ているものが良いです） ▪F a c e b o o k （一般的によく見かける顔のたくさん出ているものが良いです） ▪その他、プライバシーポリシー、採用情報、よくある質問 以上となります。また何か不明点等あれば、ご連絡ください。 それでは、よろしくお願いします。
amishiratori
jdesign_tokyo
abcmisuzu
hirokazu_oda
ajstarks
webnaut
garyuten
takanorip
ryoya_frst
usagimaru
okazakityo
zakkerooni
destraynor
chrisshort
deanohume
chriscoyier
garrettdimon
morganepeng
keavy
davidbonilla
quramy
wjessup
lauravandoore
sstephenson
