読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

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

【模写】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

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

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

【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>

【jQuery】バージョンの差異を解決 jQuery Migrate


引用元
jQuery Migrate pluginを使ってみる。 | バシャログ。

  1. 廃止されたAPIを使おうとしたり、挙動が変わった機能を使おうとした際に、ブラウザのコンソールに警告を出力する。

+廃止されたAPIを復元する

例えばtoggleメソッドは1.9では排除されているが
jQuery Migrate 1.2.1で復活できる。

<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">

公式サイトのjQueryMigrate
Migrate | Search Results | Official jQuery Blog

【jQuery】jQueryの高速化

バージョンを分ける

引用元
jQuery高速化!処理速度を10倍上げるテクニック20選

jQuery 2.x 系
モダンブラウザに最適化されたバージョン(IE6/7/8はサポート対象外)
jQuery 1.x 系
古いブラウザにも対応したバージョン

IE9以上ならなら2.x系をIE9以下なら1.x系を読み込む

<!--[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!--<![endif]-->

IEに対する条件付きコメント

引用元
IEに対する条件付きコメントを記述する。 | dakkie blog

  • IE以外のブラウザ
<!--[if !IE]> ~ <![endif]-->
  • 特定のバージョン
<!--[if IE 〇〇]> ~ <![endif]-->
  • 特定のバージョン未満
<!--[if lt IE 〇〇]> ~ <![endif]-->
  • 特定のバージョン以下
<!--[if lte IE 〇〇]> ~ <![endif]-->
  • 特定のバージョンより上のバージョン
<!--[if gt IE 〇〇]> ~ <![endif]-->
  • 特定のバージョン以上
<!--[if ggte IE 〇〇]> ~ <![endif]-->

高速化の為のコードの書き方

引用元
JavaScript・jQueryの改修・高速化のためのメモ - Qiita

  • javascriptはページ下部に記載
  • 画面描画に関係ないJavaScriptは、の直前に書く
  • CSSJavaScriptは外部ファイルで作成
  • ディレクトリ指定時には、"/"をつける
  • DOM操作の回数を減らす(DOMを読み込む回数を減らす?)
  • 配列をforで回す時は、array.lengthも変数に格納
  • 頻繁に使うオブジェクトは変数に格納
  • メソッドチェーンを使用
  • id属性を多様する(JavaScriptではDOMへのアクセスの際にid属性で検索するのが最も高速)
  • IE6,7の場合、クラスセレクタに要素名をつける
  • 配列からの取り出しはeachよりforを使う。
  • セレクタはなるべくシンプルに
  • 要素を参照する時は、範囲を指定
  • findメソッドを利用(querySelectorメソッドよりは遅くなる)
find
セレクタを絞っていく

p内のspanを全て指定。

$("p").find("span").css("color","red");
querySelector()メソッド
CSS セレクタにマッチする文書中の最初の要素返す

【jQuery】readyイベント


javascriptはHTML,CSSの読み込みが全て終わってから読み込まれる必要がある。

jQueryでの記述

以下は全てjQueryをHTML,CSSの読み込みが全て終わってから読み込ませる書き方。

$( document ).ready( function() {

});
$( document ).on( 'ready', function() {

});
$(function() {
  //処理
});