SlideShare a Scribd company logo
1 of 2
Download to read offline
Webサイト制作実習2【企画書】

      何をつくるか?           ポートフォリオサイト

      サイトの目的            転職活動のアピール材料、学習成果の記録

      想定閲覧者             応募企業の人事、面接担当者、人材・派遣コンサルタント

      何をアピールするか?(=コンテンツ)

                                                            サイトマップ
top
      about                  works                          contact

      ◎プロフィール                ◎制作実習1
        ⇒ 略歴                  ⇒ 初制作の1つのまとまったサイトの例
        ⇒ Web学習の開始時期          として(※不採用につき扱い方、要確認)

      ◎スキル                   ◎自主制作A
       ⇒ 基本的なWeb技術            ⇒ JavaScript(jQuery)を使用して制作
        └HTML/CSS             したサイトの例として
        └JavaScript、jQuery
        └PHP、MySQL           ◎自主制作B
       ⇒ 対応可能なソフトウェア          ⇒ WordPress化した(PHP、MySQL使
        └DW、PS、AI             用)サイトの例として

       ⇒ その他の職能(前職)
どうアピールするか?(与件・制約の整理と、デザインの方向性)


          (与件)
      ●
          シンプル・ミニマルなデザインにしたい (自身の好み・志向の表現)
 
      ●
          適度なインパクトは持たせたい (面白み・訴求力に欠けると評されるのを回避)
 
与     ●
          モチーフ・メタファーには、自身と関連のある材料を使いたい 
件         (自分のサイトなので、無関係なもの・説明のつかないものはできるだけ盛り込まない)
・
制
約
          (制約)
      ●
          掲載できるコンテンツが少ない (実績・バリエーションがない)
      ●
          制作実習1以外は、いずれも未着手 (時間がない)




     ➢
          コンテンツの少なさを逆手に取ったデザインにする
     ➢
          ベースとなるデザインを「書籍のレイアウト風」にしてみる

     ➢
          自主制作サイトは、最低限、やりたいことが伝わるように善処する

More Related Content

What's hot

イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうMori Kazue
 
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍Wataru Asai
 
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディングDreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディングMori Kazue
 
初めてのConcrete5
初めてのConcrete5初めてのConcrete5
初めてのConcrete5Nobuko Kodera
 
Saitowotsukutsutemita
SaitowotsukutsutemitaSaitowotsukutsutemita
Saitowotsukutsutemitahmatumoto
 
ホームページ制作
ホームページ制作ホームページ制作
ホームページ制作yosuke mizusawa
 
今更聞けないWordPress
今更聞けないWordPress今更聞けないWordPress
今更聞けないWordPressJunko Nukaga
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?masaaki komori
 
ディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディングディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディングeriko yamada
 

What's hot (17)

Vue.js
Vue.js Vue.js
Vue.js
 
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
 
5 1
5 15 1
5 1
 
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
 
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディングDreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
 
初めてのConcrete5
初めてのConcrete5初めてのConcrete5
初めてのConcrete5
 
恋に落ちるRuby
恋に落ちるRuby恋に落ちるRuby
恋に落ちるRuby
 
Saitowotsukutsutemita
SaitowotsukutsutemitaSaitowotsukutsutemita
Saitowotsukutsutemita
 
Vu
VuVu
Vu
 
React native
React nativeReact native
React native
 
Webページで学ぶJavaScript2013 第5回
Webページで学ぶJavaScript2013 第5回Webページで学ぶJavaScript2013 第5回
Webページで学ぶJavaScript2013 第5回
 
ホームページ制作
ホームページ制作ホームページ制作
ホームページ制作
 
今更聞けないWordPress
今更聞けないWordPress今更聞けないWordPress
今更聞けないWordPress
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
 
0728
07280728
0728
 
ディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディングディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディング
 
1112 nuxt
1112 nuxt1112 nuxt
1112 nuxt
 

Similar to Proposal

オークションApi×就活swotプレゼン
オークションApi×就活swotプレゼンオークションApi×就活swotプレゼン
オークションApi×就活swotプレゼンKazuki Sakai
 
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計本間 和城
 
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Zだから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない ZYasufumi Nishiyama
 
Z会のマーケティング戦略を実現させるウェブリニューアル
Z会のマーケティング戦略を実現させるウェブリニューアルZ会のマーケティング戦略を実現させるウェブリニューアル
Z会のマーケティング戦略を実現させるウェブリニューアルloftwork
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方kenji goto
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座光利 吉田
 
20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライドKenta Nakamura
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121Shohei Aoyama
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121Shohei Aoyama
 
業務エンジニアのためのWebサイト制作手順
業務エンジニアのためのWebサイト制作手順業務エンジニアのためのWebサイト制作手順
業務エンジニアのためのWebサイト制作手順Masaya Okamoto
 
いまさら聞けない!ホームページの立ち上げから運用体制構築
いまさら聞けない!ホームページの立ち上げから運用体制構築いまさら聞けない!ホームページの立ち上げから運用体制構築
いまさら聞けない!ホームページの立ち上げから運用体制構築Yasushi Taki
 
Web業界就職戦略
Web業界就職戦略Web業界就職戦略
Web業界就職戦略真一 藤川
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことMasakazu Muraoka
 
中央大学キャリアデザイン講座資料110712
中央大学キャリアデザイン講座資料110712中央大学キャリアデザイン講座資料110712
中央大学キャリアデザイン講座資料110712Keisuke Muto
 
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsグリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsYoshinori Kobayashi
 
20121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド0120121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド01Kenta Nakamura
 
ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計本間 和城
 
デ部会 プロトタイプ
デ部会 プロトタイプデ部会 プロトタイプ
デ部会 プロトタイプNobuhiko Futagami
 

Similar to Proposal (20)

オークションApi×就活swotプレゼン
オークションApi×就活swotプレゼンオークションApi×就活swotプレゼン
オークションApi×就活swotプレゼン
 
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
 
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Zだから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
 
Z会のマーケティング戦略を実現させるウェブリニューアル
Z会のマーケティング戦略を実現させるウェブリニューアルZ会のマーケティング戦略を実現させるウェブリニューアル
Z会のマーケティング戦略を実現させるウェブリニューアル
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
 
20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
Keynote 20120316
Keynote 20120316Keynote 20120316
Keynote 20120316
 
081108 Web Strategy Presentation
081108 Web Strategy Presentation081108 Web Strategy Presentation
081108 Web Strategy Presentation
 
業務エンジニアのためのWebサイト制作手順
業務エンジニアのためのWebサイト制作手順業務エンジニアのためのWebサイト制作手順
業務エンジニアのためのWebサイト制作手順
 
いまさら聞けない!ホームページの立ち上げから運用体制構築
いまさら聞けない!ホームページの立ち上げから運用体制構築いまさら聞けない!ホームページの立ち上げから運用体制構築
いまさら聞けない!ホームページの立ち上げから運用体制構築
 
Web業界就職戦略
Web業界就職戦略Web業界就職戦略
Web業界就職戦略
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
 
中央大学キャリアデザイン講座資料110712
中央大学キャリアデザイン講座資料110712中央大学キャリアデザイン講座資料110712
中央大学キャリアデザイン講座資料110712
 
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsグリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
 
20121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド0120121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド01
 
ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計
 
デ部会 プロトタイプ
デ部会 プロトタイプデ部会 プロトタイプ
デ部会 プロトタイプ
 

Proposal

  • 1. Webサイト制作実習2【企画書】 何をつくるか? ポートフォリオサイト サイトの目的 転職活動のアピール材料、学習成果の記録 想定閲覧者 応募企業の人事、面接担当者、人材・派遣コンサルタント 何をアピールするか?(=コンテンツ) サイトマップ top about works contact ◎プロフィール ◎制作実習1   ⇒ 略歴 ⇒ 初制作の1つのまとまったサイトの例   ⇒ Web学習の開始時期 として(※不採用につき扱い方、要確認) ◎スキル ◎自主制作A ⇒ 基本的なWeb技術 ⇒ JavaScript(jQuery)を使用して制作 └HTML/CSS したサイトの例として └JavaScript、jQuery └PHP、MySQL ◎自主制作B ⇒ 対応可能なソフトウェア ⇒ WordPress化した(PHP、MySQL使 └DW、PS、AI 用)サイトの例として ⇒ その他の職能(前職)
  • 2. どうアピールするか?(与件・制約の整理と、デザインの方向性) (与件) ● シンプル・ミニマルなデザインにしたい (自身の好み・志向の表現)     ● 適度なインパクトは持たせたい (面白み・訴求力に欠けると評されるのを回避)   与 ● モチーフ・メタファーには、自身と関連のある材料を使いたい  件 (自分のサイトなので、無関係なもの・説明のつかないものはできるだけ盛り込まない) ・ 制 約 (制約) ● 掲載できるコンテンツが少ない (実績・バリエーションがない) ● 制作実習1以外は、いずれも未着手 (時間がない) ➢ コンテンツの少なさを逆手に取ったデザインにする ➢ ベースとなるデザインを「書籍のレイアウト風」にしてみる ➢ 自主制作サイトは、最低限、やりたいことが伝わるように善処する