01_サイト制作

アマゾンキンドル、newspicks
#ヒアリング法1 https://www.youtube.com/watch?v=xyE-Pha3I7w

①ビジネスの現状を知る
どのようなビジネスモデルなのか

クライアントのビジネスが
どこでなにをどのように行っているのか
現状のWEBサイトや集客方法
・基本はメールで聞き出した内容をもとに話す
・空気読んで後日ヒアリングシートを送って提出してもらうとか　ヒアリングシートは使わない方がいい掘り下げる必要があるため

②なぜリニューアルしたいのか
・目的をはっきりさせること
漠然とした相談も「漠然とした場合もある、ホームページをリニューアルして売上を上げたい
デザインが古いから綺麗にしたい」
解決法がわからないから相談されていることを意識


1.現状の問題点課題の明確化
　例　余白　読みにくい　画質悪い　導線がわからない


2.競合や類似サイトの調査
　・どのような広告・キャッチコピー	
　・ユーザーフロー
　・デザインの方向性
　・SNSで何やっているか
　成功事例を参考に

3.ペルソナ、目標・目的
　ターゲット例　20代30代主婦料理好き
　・webからの予約を10件
　・お問い合わせを50件


③現状のドメインサーバー・CMSなど環境
　・管理画面やサーバのログイン情報を聞き出す必要がある。


④予算・スケジュール
　・ディレクター・デザイナー・エンジニア以外に
　・カメラマンやライターが必要な場合もでてくる
　
　
⑤動画・写真・文章・イラスト
・動画撮影・編集
・写真撮影
・原稿ライティング
・イラスト制作

#ヒアリング法2 https://www.youtube.com/watch?v=OnR2fOIKaV8
重要　ヒアリングシートは使わない方がいい　できる限り掘り下げる必要があるため
　　　ヒアリングしたうえでここはこういう風にしたほうが良いのではのほうが良い
　　　
　・相手のいう通りにやるがよいものではない
　・デザインの方向性や機能要件だけ聞いても提案のしようがない(中身のあるヒアリングをする)


・背景と目的
・ターゲットに関すること
　▶ターゲットが商品使った後にどんな将来像をイメージできたらいいのか
　▶ターゲットのお財布事情や決裁者事情　学生ターゲットなら親にばれない等

・商品サービス
　強み
　▶何が売りか、何が説得材料か
　▶なぜそれが売りになるか(強味の深堀)
　
　強味の利用シーン
　▶サービス商品をどうみせるか考えると時につかう
　
　実績
　競合
　
　
　	
・戦略に関すること
　商流
　　▶お問い合わせ以降は営業にまかせるなど
　　
　WEB以外のメディアはあるか
　WEB単体で考えず全体のビジネススキームの中で何が提案できるかを考える
　　パンフレットやチラシあるならこれとどう組み合わせるか
　
　過去に実行した戦略
　　失敗していることがあればやらない、それをもとに別提案できる

・企業にかんすること
　ブランディングの方向性
　　▶企業としてどうみせたいのか
　
　企業信頼に繋がる情報はないか
　　▶何かに表彰された	
　　▶新技術
　　▶社会貢献
　　▶創業何年

・その他業務的なこと
	▶機能要件/CMS要件
	　・お問い合わせのフォーム必要、資料請求のフォーム
	　・ブログをいれよう
	　・活動報告をCMSで登録できるように使用　
	　　CMSとは、初心者でも簡単にホームページを作成・更新できるシステムのこと
	▶サーバドメインについて
	▶対応範囲
	▶納期
	▶提案期日
	▶予算
	▶なぜ制作会社を変えるのか
	　・同じことを繰り返さないため
	▶現状の不満点
	　デザインが問題なのか、機能なのか
	　お問い合わせこないのか
	▶市場について具体的に教えてもらう
	　市場について具体的に教えてもらう(お客さんのほうが詳しい)


#実践後
・なぜその仕事しようと思ったとか
・ヒアリング
・イメージとなりそうなサイトを複数用意する。

・思いとか背景企業理念とかを聞く
　▶サイト構成案にかかわってくる

#2サイトマップ作製

#3ワイヤーフレーム作成ガイド
https://web-kanji.com/posts/making-wireframe


#4デザイン学習　色編
https://techblog.nhn-techorus.com/archives/13273



#フリー素材サイト
Pexels
https://www.pexels.com/ja-jp/

Pixabay
https://pixabay.com/

BURST
https://burst.shopify.com/

Unsplash
https://unsplash.com/​

Pakutaso
https://www.pakutaso.com/​

PhotoAC
https://www.photo-ac.com/

FIND47
https://find47.jp/

タダピク
https://www.tadapic.com/

#アーカイブサイト
❐ アーカイブサイト
-----------------------------------------------
□ Webデザインアーカイブサイト
http://io3000.com/
https://land-book.com/
https://www.awwwards.com/

□ UIデザインアーカイブサイト
https://mobbin.design/
https://www.uplabs.com/

カラーツールサイト
https://encycolorpedia.jp/
https://color.adobe.com/ja/create/color-wheel
カラーツール紹介サイトhttps://www.alta.co.jp/blog/post-2109/


色彩サイト
https://webnaut.jp/design/640.html
https://techblog.nhn-techorus.com/archives/13273

アニメーション
https://mag.ibis.gs/creative/design/motion_200715/

配置
https://web-kanji.com/posts/homepage-layout


ttps://www.canva.com/ja_jp/learn/serif-fonts/
学ぶ学ぶ
デザインに伝統的なエッセンスを加えてくれる、フリーのセリフ書体55選
セリフフォントを使えば、読み手に負担をかけることなくスムーズに次の文字を目で追うことができ、また認識しやすくなります。今回は、素敵なフリーのセリフ書体を厳選してみました。 (192 kB)
https://www.canva.com/ja_jp/learn/serif-fonts/





#フォント
21:31
https://blog.formzu.com/font-select
21:32
https://hikkoshizamurai.jp/soldi/articles/font_select_2017/
通信費・家計見直しサイト Soldi(ソルディ)通信費・家計見直しサイト Soldi(ソルディ)
フォントオタクなデザイナーが本気で選んだ「美しいフォント」24選【フリー＆有償】
世の中には高品質で美しいフォントがたくさんあります。有償・無償問わず優れたフォントを見るとワクワクします。そんなフォントオタクなデザイナーが選んだとにかく美しいフォントを24書体ご紹介します。プロだけでなく個人のブログにも生かせる内容です。
21:32

https://tsutawarudesign.com/yomiyasuku2.html




#カーニング
https://321web.link/kerning/
https://99designs.jp/blog/design-tips-ja/%E6%96%87%E5%AD%97%E3%83%87%E3%82%B6%E3%82[…]3%81%AE%E3%83%92%E3%83%B3%E3%83%88%EF%BC%9A%E3%82%AB%E3%83%BC/

https://coliss.com/articles/build-websites/operation/design/ultimate-guide-to-kerning.html