ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【リサイズ】バナー制作 41〜42枚目

f:id:p_and_a_fam:20170531132915j:plain
f:id:p_and_a_fam:20170531132918j:plain
f:id:p_and_a_fam:20170531132922j:plain
f:id:p_and_a_fam:20170531132935j:plain

模写リサイズ

サイズ ① 300*250/10min 728*90/5min 160*600/5min Toolphotoshop
サイズ ② 300*250/5min

【模写】1day1banner (1日1つバナー制作33日目)

1日1つバナーを作っていきます。
f:id:p_and_a_fam:20170424110416p:plain
f:id:p_and_a_fam:20170424110414p:plain
f:id:p_and_a_fam:20170424110415p:plain

模写リサイズ

サイズ300*250/10min 728*90/5min 160*600/5min Toolphotoshop

【模写・リサイズ】バナー制作 40枚目

f:id:p_and_a_fam:20170531133451j:plain
f:id:p_and_a_fam:20170531132925j:plain
f:id:p_and_a_fam:20170531132931j:plain

模写リサイズ

サイズ300*250/10min 728*90/5min 160*600/5min Toolphotoshop

【模写・リサイズ】バナー制作 39枚目

f:id:p_and_a_fam:20170418100416j:plain
f:id:p_and_a_fam:20170418100418j:plain

模写リサイズ

サイズ300*250/15min 728*90/15min Toolphotoshop

【模写・リサイズ】バナー制作 38枚目


f:id:p_and_a_fam:20170424110416p:plain
f:id:p_and_a_fam:20170424110414p:plain
f:id:p_and_a_fam:20170424110415p:plain

模写リサイズ

サイズ300*250/10min 728*90/5min 160*600/5min Toolphotoshop

【webデザイン】サイト作成時のヒアリング

サイト制作の為のヒアリング

  • クライアントワークに取り掛かるに当たって、いろいろなサイトを参考にヒアリング時に必須な項目を割り出しました。

参考サイト1

Webデザイン制作のために、絶対に質問すべき64のコト | WebサイトやアプリのUI/UXデザイン会社

コンセプト

  1. どのようなサイトを制作するのか
  2. どのような顧客がターゲットか?
  3. 目的の確認
  4. 訪れた人にどうしてほしいか
  5. すでに公開しているものがあるか(サイトやブログ、SNSなど)
    1. もしあればどのように使っているか。
    2. 変更したいポイントはあるか
    3. 変更したくないポイントはあるか。
  6. 競合にない強みはあるか
  7. 競合にはどのようなところがあるか
  8. 現状で困っていることはあるか。
  9. 他のサイトでイメージに近いものや目指したいものはあるか。
    1. もしあればそのサイトのどんなところがいいと思ったか
  10. webサイト制作の責任者は誰か。

デザイン面

  1. ロゴマークなどはあるか
  2. 過去に制作しチラシ等、参考にできるものはあるか
  3. 好きなデザイン、こんな感じという参考があれば教えてもらう。
    (webサイト以外でもok。例:ファッションブランドなど)
  4. 逆にこれは嫌だ、こうはしてほしくない、こういうサイトは嫌いだというものがあれば教えてもらう。

ページの設計

  1. 具体的にどんな内容をwebサイトに入れたいか
    SNSやブログ、予約フォームやお問い合わせフォームなど。
  2. 今の段階で提供していただける画像や原稿はあるか
  3. サイトにつけたい機能

公開するとき

  1. これにしたいというアドレスはあるか
  2. どんなサイトを作るか。
  3. 誰が作るか ロゴ等や写真、各パーツ

アイディアがない場合はマインドマップなどを使い5w2hをもとに考えていく。
http://websae.net/website-preparation-20140424/

参考サイト2

Web制作のクライアントにヒアリングしたい項目と意識すべき重要なこと | 株式会社LIG

ヒアリングで重要なこと

ビジネスモデル

  • クライアント:どのような目的を達成したいか
  • ターゲット:どのようなWebサイトであれば利用する価値があるか

お客様のビジネスを成功させるための情報を聞き出す。

  • 業界の市場規模と、御社のポジション
  • 商品当たりのお値段
  • 他所の商品と比べてどのような方法・営業で販売しているか

単にサイトを作るのではなく、ビジネスパートナーとして付き合っていくこと

参考サイト3

ホームページ制作する前に知っておくべき事 リサーチ編 - 誰でも簡単にホームページは自分で作れる

競合するwebサイトの調査

-敵を知り、己を知れば、百戦危うからず。競合するサイトのキーワードやindex数をしらべる。

サイトのURLを入れると詳細が見れる。
http://seocheki.net/

自身の強みをはっきり。

ターゲットの選定

  • デザインだけでなく写真、文体などを気を付ける

キーワードを考える。

  • ターゲットが検索しそうなキーワード

必要なページを想定する

  • 必要な項目を箇条書きでもいいので出す。
  • 競合のページも参考にしつつどういったコンテンツが共通してあるかまたは必須か

例)ネットショップの場合

  • 販売商品ページ(複数ページ)
  • お支払いと配送について…特に送料・手数料など
  • 特定商取引法に基づく表記/訪問販売法に基づく表示など、今回の場合はどんな記載が必要か。

参考サイト4

Webデザイナー(私)によるWeb制作のときに気をつけてることや制作フローとかいろいろ

ターゲットとゴールを設定する

  • クライアントさんと一緒にゴールを決める。
  • なぜwebサイトをつくるのか、webサイトを作って何を達成したいか。

ターゲット絞る意味

  • 買ってほしい人、いつも商品を買ってくれる人に「自分向けのサイトだ!」と思ってもらうことが必要になる。
  • ターゲットを幅広く取ってしまうと、どのひとからも「自分向けではないのかな?」と思われてしまうので、メインのターゲットを決めてその層に絞って作っていく。

コンセプトを決める

  • はっきりとした言葉を使った明確なメッセージを使う。
  • 具体的な目標

例)

  • ロゴを覚えてもらいたい
  • 自社の商品の売り上げを伸ばしたい。
  • オシャレなアクセサリーを売っているブランドだと思われたい。

情報、コンテンツのグルーピング

  • 関係あるものは近づけ、関係の薄いものは遠ざける。
  • グルーピングした情報に優先順位をつける。
  • 優先順位の大きいものは大きく目立つようになど。
  • 情報を利用するのはユーザー

ユーザビリティ

  • サイト構造自体を使いやすく。
  • ユーザーが迷子にならないように。ユーザーにとって使いやすく。
  • ユーザーがサイトに訪れる目的を、ユーザーの身になって考える。

作成ポリシー

クロスブラウザ(cross- browser)
どのブラウザでも同じように見えて同じように動くようにすること。
プログレッシブエンハンスメント (Progressive Enhancement)
どのようなブラウザ環境であっても必要最低限情報がきちんと表示されるように制作しつつ、新しい環境が整っているモダンブラウザユーザーにはよりリッチな表現でコンテンツを見せていく作り方。

参考 http://blog.nest-online.jp/17295

ターゲットブラウザ
ブラウザのシェアを確認して対応ブラウザを検討。(対応ブラウザが増えていくごとに工数が増えていく。)

参考 https://webzin.jp/web/browser-share.html

ワイヤーフレームを作る

  • 導線の設計
  • 必要となる機能
  • ページごとのSEOキーワード等を書き加えていく。
  • 404 Not Found を表示するページも必要。

ヒアリングシートフォーマットまとめ
https://ferret-plus.com/3256

【jQuery】toggleをmigrateで有効にした画像置換


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<p id="imgChange"><img src="../img/buta.jpg"></p>
<script>
$(function(){
$('#imgChange').toggle(function(){
$('img').attr('src','../img/same.jpg');
},function(){
$('img').attr('src','../img/umi.jpg');
},function(){
$('img').attr('src','../img/hana.jpg');
},function(){
$('img').attr('src','../img/buta.jpg');
});
});
</script>
</body>
</html>