たねっぱ！ » yukappa!(INO) https://taneppa.net コツコツあつめるWeb作りのためのたね　たねっぱ！Web系情報ブログ　Webのお役立ちネタ配信中！ Tue, 09 May 2023 00:02:06 +0000 ja hourly 1 http://wordpress.org/?v=3.5.1 うまくいかない！？原因はケアレスミスかも…コーディング時のチェックリスト https://taneppa.net/miss_check/ https://taneppa.net/miss_check/#comments Fri, 08 Feb 2013 08:03:51 +0000 yukappa!(INO) https://taneppa.net/?p=320 ぱっと見みた目が変わらないものもリストに入れています。
(htmlバリデータでエラーが出るものです)
直接見た目にかかわるものには★マークをつけています。

HTML編

①★<div>の閉じ忘れやうっかり削除してしまっていた…

これです。一番やってはいけないことをやらかしました。
<div>要素を追加したとき、ID、クラス名が変わったとき、
<div>の閉じタグ部分もしっかり注意しましょう。
そんなときに便利なのがこちらの記事で書いた拡張機能です

>>Dreamweaverさんと仲良くなれそうな拡張機能とショートカットのお話
<div>要素の閉じタグコメントでうっかりミスをなくしましょう！

②タグの中に改行が入っていた

タグとタグの間に改行は問題ないのですが、たとえば

<img src=”http://taneppa.jp/images/button.jpg” width=”60″ height=”60″ alt=”ボタン”>

というimgタグの場合、ちょっと長くなっちゃってもとくに！URLの真ん中なんかで改行しちゃダメです！
変に改行を入れると、文字間に謎のスペースが入ってしまいます。

③<p>タグの中身に入れてはいけないもの

<p>の中に入れてもいいのはテキストとインライン要素のみ。<li>はインライン要素に含まれません。
ブロック要素である<div>も×です。

スタイルシート編

①★スタイルシートの優先順

スタイルシートには優先順位があり、それに基づいてスタイルが適用されます。
優先度をしっかり把握し、きっちりスタイルづけしていきましょう。
優先順については以下の記事をどうぞ！

>>ちゃんと覚えておきたい！スタイルシートの優先順位のお話

②★スタイルシートに全角スペース

body {
background-color: #fff29a;
}

というスタイル内の以下の部分(いずれか1つでも)全角スペース(“□”)が入っているとスタイルが適用されません

body □{
background-color:□#fff29a;
}

全角スペースだけでなく、使用しているや記号文字が全角でもうまくいかなくなってしまいます。。

③★スタイルシートに「；」が抜けていた

ひとつのスタイル指定ごとの終わりにつける「；」セミコロンが抜けている場合、
その次に書いたスタイルが聞かなくなってしまいます。
(ただし｛｝内の一番最後に書いているものは抜けていても大丈夫)
ちゃんとスタイルを設定してるのにきかない！という場合「；」忘れを疑ってみましょう。

PHP編

phpの記述がたりない(？忘れ)

wordpressではphpタグが入りますが、開始「<?php」 ～終了「?>」と「？」が入ります
これが抜けていたり開始部分「<?php」の「？｝と「php」の間にスペースが入っていても
うまく動作してくれません。

いかがだったでしょうか「えっそんな簡単な所間違えてたの…！？」という失敗ばかりだったでしょうか…(´；へ；｀)
コーディング中、文字が増えてくると意外な見落としが出てきたりします。
最後まで気を抜かず、丁寧なコーディングを心がけたいですね！

]]> https://taneppa.net/miss_check/feed/ 0 見ながら覚えよう！positionプロパティ「absolute」と「relative」についてのお話 https://taneppa.net/position_property/ https://taneppa.net/position_property/#comments Wed, 06 Feb 2013 09:05:51 +0000 yukappa!(INO) https://taneppa.net/?p=212 私もちょっと長いこと、

  • absolute＝絶対位置
  • relative＝相対位置

といわれても全然ピンときてませんでした。「絶対？相対？どういう意味？」という感じだったのですが、
きっと、考えるより実際見てみたほうがわかりやすいと思います！

実際にページに配置して確認してみましょう。

01ページ内に配置してみる

<body>～</body>内のソース

<body>
<div id=”box”>配置するボックス</div>
<p>テキスト</p>
</body>

「absolute」

ページ左上から120px、左から120pxの場所に表示されます。

01

「relative」

ページ左上から120px、左から120pxの場所に表示されます。･･･が！！！テキストの場所が違います。 02

テキストの上部に謎の隙間ができますね・・・
これは、relativeが元々表示されるはずだった高さが残るためです。
元々あるべき位置から見た目だけ右下にずれた。と考えたほうがわかりやすいかもしれません。
03

この表示のクセがわかれば簡単です！
次もきっとさくさくわかるハズ(*´o｀*)ﾉ

02ボックスが重なった場合

次に、ボックスが2つになった場合を見てみましょう
下の黄緑色のボックスは

position:relative;
top:100px;
left:100px;

で位置指定をしています

配置するボックスは
ページ上から120px、左から120pxの場所に表示されます。

<body>～</body>内のソースは

<body>
<div id=”box1″>下に敷いているボックス</div>
<div id=”box2″>配置するボックス</div>
</body>

としています。

それでは、二つの配置を確認してみましょう！

「absolute」

下のボックスなんて問答無用！で左上からの絶対位置に表示されます

04

「relative」

黄緑色のボックスは「relative」指定だったので実は元々あった場所に高さが残っていました。
ちょっとややこしいのですが、ピンクのボックスは元は「半透明になっている黄緑ボックス」の下に配置されるはずだったのですが、(さっきのピンクのボックスのテキスト位置を思い出してみてください(*´o｀*)！「relative」で位置を指定しているので「本来配置されるべき位置」からの座標位置に配置されています

05

03ボックスの中に配置した場合

次に、ボックス内に配置した場合の「absolute」「relative」の違いを確認してみましょう

外側の灰色のボックスは
先ほどと同じく、

position:relative;
top:100px;
left:100px;

で位置指定をしています
※padding指定は20pxにしています。(薄い灰色で塗りつぶした部分)

配置するボックスは
基準点より上から20px、左から20pxの場所に表示されます。

<body>～</body>内のソースは

<body>
<div id=”box1″><div id=”box2″>配置するボックス</div></div>
</body>

※box1＝外側の灰色ボックスです

「absolute」

親となるボックスの左上を基準点とし、
上から20px、左から20pxの場所に表示されます。

06

「relative」

元々配置されるべきだった「paddhingを含めた描画位置」を基準点とし、上から20px、左から20pxの場所に表示されます。

07

まとめ

青のボックス「absolute」は親ボックスの指定が何であっても、必ず左上を基準点とする(絶対位置)
→基準点から数値を指定して、表示したい場所に配置したいときに便利
ピンクのボックス「relative」は本来ピンクのボックスが表示される位置を基準として配置(相対位置)
→「元の位置から○ピクセルずらしたい」というときに使用すると便利

気をつける点：親ボックスの位置や設定を受ける場合があるので(特にrelative)忘れず注意すること

よく使われるパターンは親ボックスがrelative(またはabsolute)、その中にabsoluteです。

わかりづらいけれど使えるようになるととっても便利なpositionプロパティ、
どんどんチャレンジしてみましょう！

]]> https://taneppa.net/position_property/feed/ 0 スタイルシート、きれいにしてますか？CSS記述の順序についての記事まとめ https://taneppa.net/css_rules/ https://taneppa.net/css_rules/#comments Wed, 30 Jan 2013 08:31:34 +0000 yukappa!(INO) https://taneppa.net/?p=173 スタイルシートを記述する際、順番がぐちゃぐちゃになってわからなくなってしまう…なんてことありませんか？

たとえば大きなプロジェクトで複数人でCSSを編集するとき、他の人に作業を移行するときにも
記述がばらばらのCSSを使うのは、わかりにくい上にちょっと恥ずかしいですよね(*・.・*)

それを解消するため、「mozilla.org Base Styles」や「CSS2 Specification」などで書き方を提案してくれています。

今回は上記のスタイルの書き方について、わかりやすく紹介して下さっている記事を探してみました。

mozilla.org Base Stylesについての記事

CSSstylesheet.jp

http://css.microrza.com/csstips/css_order/

CSS2 Specificationについての記事

hail2u.net

http://hail2u.net/blog/webdesign/css2-property-order.html

VERSIONFIVE

http://versionfive.jp/2007/04/order_of_css_properties/

両方＋「Web標準の教科書―XHTMLとCSSでつくる”正しい”Webサイト」をミックスしたもの

かたつむりくんのWWW

http://www.tinybeans.net/blog/2008/02/post-12.html

使用頻度や分かりやすさが考慮されていて、

ボックスモデル＋視覚モデル
↓
文字や背景の装飾
↓
テーブルや音声等

という順序に分けられているようです。

誰にでもわかりやすく、項目ごとに分かれたスッキリ見やすいスタイルシートを書くことで
自分もわかりやすく、人にも伝えやすいお仕事ができると思います！

]]> https://taneppa.net/css_rules/feed/ 0 jQueryに挑戦してみよう！初心者さん向け jQueryが学べるサイトまとめ https://taneppa.net/letsbegin_jquery/ https://taneppa.net/letsbegin_jquery/#comments Tue, 29 Jan 2013 07:29:45 +0000 yukappa!(INO) https://taneppa.net/?p=166 jQueryを学んだみたいけれど何から手をつけたらわからない･･･という時に
勉強になるサイトをまとめてみました。

まずはjQueryの基礎を知ろう

ドットインストール/jQueryの基礎 /#01 jQueryとは何か？

http://dotinstall.com/lessons/basic_jquery/501

ドットインストールさんは動画でやさしく解説して下さっているので、はじめはワケがわからなくても、一通り動画を見ておくと雰囲気がぐっとつかみやすくなるのでオススメです！
以下2つのサイトも、「jQueryって何？」というところからわかりやすく教えてくれています。

Web制作の現場で使えるjQuery　UIデザイン入門

http://ascii.jp/elem/000/000/438/438206/

jQuery入門

http://jquery.keicode.com/devenv/what.php

jQueryのことがちょっとわかったら･･･

jQuery UI（ユーザインターフェースライブラリ）を利用してみましょう！
サンプルとコードを用意してくれているため、実行結果もわかりやすく、
知識があまりなくても使える仕組みとなっています

jQuery UI(公式ページ)

http://jqueryui.com/

ドットインストール/jQuery UIの基礎/#01 jQuery UIとは何か？

http://dotinstall.com/lessons/basic_jquery_ui/8901

jQuery UIとは・・・【jQuery UI のかんたん解説（その1）】

http://www.webcreatornote.com/2011/05/jquery-ui%E3%81%A8%E3%81%AF%E3%83%BB%E3%83%BB%E3%83%BB%E3%80%90jquery-ui-%E3%81%AE%E3%81%8B%E3%82%93%E3%81%9F%E3%82%93%E8%A7%A3%E8%AA%AC%EF%BC%88%E3%81%9D%E3%81%AE1%EF%BC%89%E3%80%91/

だいぶ使えるようになった！と思っていても思わぬところで躓いてしまいがちです。。。
慣れてきた方も基本をもう一度きちんと学んでおけば怖いものなしですね！

]]> https://taneppa.net/letsbegin_jquery/feed/ 0 ちゃんと覚えておきたい！スタイルシートの優先順位のお話 https://taneppa.net/stylesheet-priority/ https://taneppa.net/stylesheet-priority/#comments Thu, 24 Jan 2013 08:26:56 +0000 yukappa!(INO) https://taneppa.net/?p=89 CSSの指定がうまくいかなくて、「おかしいなー」と思っていたら
私はこの「優先順位」がわからなくて引っかかっていました。
スタイルシートの優先順位、慣れていないと、「どっちが上？」と迷ってしまいますね。
今日はCSSの優先度についてまとめてみました。

まずは基本の考え方からはじめてみます。

同じセレクタで指定した場合

たとえば、

<p><a href=”#”>文字列</a></p>　　にたいして

p{color:red;}
p{color:blue;}　　と、同じセレクタで指定した場合

文字列　　と表示されます。

これは、同等のセレクタでのスタイル指定に対して、
下に書いたスタイルが優先されているということになります。

もう少し細かく指定したらどうなるでしょうか

こんどは

<p><a href=”#”>文字列</a></p>　　にたいして

p a{color:red;}
p {color:blue;}

と「blue」に負けていた「red」の指定に「a」セレクタを足してみました。すると、

文字列　　という表示になります。

ここまででわかることは
・同等のセレクタの場合、下に書いたほうが優先される
・それ以上により細かくセレクタを指定したほうが優先される(ただし全てがそうとは限らない)

この基本の考え方を頭に入れつつ、次にいってみましょう！
(※2つ目の項目については後述します)

セレクタや指定方法によって優先度が違う

さっきは同じセレクタ指定の場合…で考えてみました
今度はこんな場合ならどうでしょうか？

<p id=”red”　class=”blue”>文字列</p>　　にたいして

#red{color:red;}
.blue{color:blue;}　　と指定してみます。

すると

文字列　　という表示になりました。

これは、クラス指定よりもID指定のほうが優先度が高いということですね！

このように、セレクタによって優先度を分けると以下のようになります

↑優先度高
ID「#」を使う(100点)
class「.」を使う(10点)
h1,pなどのタグ指定(1点)
全称セレクタ「*」を使う(0点)
↓優先度低

横についている点数で優先度が決まります。
指定しているセレクタの数と点数を計算し、点数が勝っているほうが
優先されます。

たとえばさっきのスタイル指定でいうと
#red{color:red;}　　（←IDを使ってるから100点)
.blue{color:blue;}　（←classを使ってるから10点)

結果＝点数の勝っているID指定の方が勝って文字が赤くなった

たとえば、同じIDを使っているとしたら…

#taneppa .tane p a {color:red;}(ID100点＋class10点＋タグ(p＋a)2点＝112点)
#taneppa .tane p {color:blue;} (ID100点＋class10点＋タグp1点＝111点)←一点差で負け！

ということでこのスタイル指定では上のスタイルが優先されることになります。
※最初の説明で「細かく指定したほうが優先される」と書いたのは、この「足し算形式」で点数が加算されたほうが優先される為です。
ですが、より強いセレクタ指定がきた場合は負けてしまうので注意しましょう。

※厳密に言うと、もう少し違う言い方になるのですが、分かりやすさ優先で書いています

もう少し詳しい考え方についてはこちらの記事がとっても参考になりました！
CSSに関する基本的なこと4（優先順位、セレクタの組み合わせ）
CSS HappyLifeさん

]]> https://taneppa.net/stylesheet-priority/feed/ 1 Dreamweaverさんと仲良くなれそうな拡張機能とショートカットのお話 https://taneppa.net/dreamweaver_extended/ https://taneppa.net/dreamweaver_extended/#comments Tue, 22 Jan 2013 08:40:22 +0000 yukappa!(INO) https://taneppa.net/?p=68 皆さんは便利機能がた～っぷりなDreamweaverさんと仲良くお仕事してらっしゃいますか？
私は…まだちょっと微妙な距離感を感じています。。。
コーディング作業もまだちょっと自信がないという方におススメの
Dreamweaverと少し仲良くなれそうな拡張機能とショートカットをご紹介いたします。

もう</div>で迷わない！閉じタグコメントを自動生成してくれる拡張機能

今だに入れ忘れてしまったり、いちいち入れるのが面倒だったりする</div>なんかの閉じタグコメント。
なんと自動生成してくれる拡張機能が！さすがですカヤックさん！

コメントを生成して挿入するDreamweaver用の拡張機能を作成しました
(KAYAC DESIGNER’S BLOGさんより)

上記ブログ記事よりEnd_comment.mxpをインストールします
問題なくインストールが完了するとAdobe Extention Managerに拡張機能が追加されます
extention_manager

さっそく使ってみよう！

①Dreamweaverを起動し、閉じタグコメントを挿入したい部分にカーソルを合わせます01

②コマンド(C)→「閉じタグコメントを挿入」をクリック
02

③コメントが挿入されました！　class指定してたので「.main02」と表示されています
03

④ID指定だと「#」が表示されています
04

この拡張機能のおかげでうっかり迷子が減りそうです！
ショートカット登録しておくととっても便利です！！

もうひとつ、基本の機能ですが、ソースをきれいにしてくれる「ソースフォーマットの適用」機能
05
Windowsのデフォルト設定だと「Alt」→「C」→「A」
作業の区切りで押しておくと、いつでもすっきりソースを見ることができますね。
これもショートカット登録しておくととっても便利！

コーディングの際、謎の</div>があったり、フォーマットされていないソースを開くと
まず「うわっ…とっつきにくい…」と思ってしまいますよね。

すっきりしたきれいな机で作業をするように、まずはソースもきれいにして作業していきたいですね(*＾v＾*)

]]> https://taneppa.net/dreamweaver_extended/feed/ 2 見出しデザインに迷ったらどうする…？参考サイトさんをまとめてみました https://taneppa.net/design_of_heading/ https://taneppa.net/design_of_heading/#comments Mon, 21 Jan 2013 07:32:07 +0000 yukappa!(INO) https://taneppa.net/?p=45 Webサイト、ブログ作成時に必要となる見出しのデザイン装飾。
シンプルだったりしっかり目を引くデザインだったり、さまざまです。
今日はそんな見出しをデザインする際に参考になるサイトをまとめてみました。

まずは見出しデザインのバリエーションを知ろう

見出しデザインを取り扱っているデザインギャラリーサイトさんです

見出しデザイン.com

01Midashi
http://midashi-design.com/

100%見出しデザイン！デザイン別にカテゴリわけされています。
実際に見出しが使用されているサイトへジャンプして、
全体のデザインを見ることもできます。

ブブンデザインアーカイブ(見出しページ)

02Bubun
http://bubundesignarchive.jp/mid/

Webデザインをパーツ別に見ることができます
パーツ別、業界別で画像の閲覧ができるので便利！
見出しだけでなく、各パーツのデザインの参考に。

WEBサイトカッコイイ(見出しページ)

03Kakkoii
http://fukuoka-web.hustle.ne.jp/find/

かっこいいWEBサイトを集めたリンク集
関西的なニュアンスで言うと「シュっとした」感じの
スタイリッシュで洗練されたデザインのWEBサイトを紹介してくださっています。

便利なWebツールを使ってみよう

スタイルシート見出しメーカー

04Style
http://midashi-maker.v-colors.com/

好きな色を4色選ぶ⇒「作る！」を押すだけで
簡単見出しデザインを作ってくれるWebツールです
シンプルに素早く見出しを作りたいときにおすすめ！

画像で見出しを作ってみよう

Mdnデザイン

Webデザイン表現&技法の新・スタンダード」
MDN DESIGN
http://www.mdn.co.jp/di/articles/2364/?page=6


Illustratorで作成する見出しバーの作り方がわかりやすく紹介されています
画像の見出しは装飾やグラデーションをふんだんに使えるところが魅力的ですね！

HTMLとCSSで作成してみよう

Webクリエイターボックスさん

「Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える」
WEBクリエイターボックス
http://www.webcreatorbox.com/tech/css-heading-list-blockquote/

サンプルとともにコピー＆ペーストで使える見出し・リスト・引用文が
紹介されています。シンプルで使いやすそうなデザインです。

3STREAMERさん

「コピペで出来るCSS3で見出しスタイリング」
3STREAMER
http://blog.3streamer.net/html5-css3/css3-styling-231/

CSS3を使って見出しを作成する方法を紹介されています。
リボンやふきだしなど、コピー＆ペーストで使えるサンプルが豊富。

Webデザインのレシピさん

「手間ひまかけずcss3だけでデザインしたい人のためのチュートリアル集22選」 08Recipe
http://www.so-network.biz/css/css3_ui/

「作ってみたい！」と思うようなチュートリアルが22種類も紹介されています！
海外のサイトの紹介が多めです。「こんなこともできるんだ！」と、参考になるものが多いです。

]]> https://taneppa.net/design_of_heading/feed/ 0 カラースライダーを変えると色選びが楽になるかも！RGBとHSB(HSV)カラーのお話 https://taneppa.net/hsbcolor/ https://taneppa.net/hsbcolor/#comments Thu, 17 Jan 2013 08:01:24 +0000 yukappa!(INO) https://taneppa.net/?p=28 今日はカラーパレットのお話です。

Webで色を指定する際、ほとんどの場合は16進数のRGBカラーコード、もしくはカラーネームで指定していますよね。
じゃあ、デザインするときは？ サイトの配色を決める際にはどうやって色選びをしていますか？
AdobeソフトウェアにはRGBカラーパレット以外にもいくつかのカラースライダー(カラーピッカー)が用意されています。
その中でも「感覚重視！」で色選びができるHSB(HSV)カラーパレットをご紹介します

HSB(HSV)って何？

色相(Hue)・彩度(Saturation)・明度(ValueまたはBrightness)の3つの要素からなるカラーモデル。

HSB

  • 色相→色相環(色相の輪)　輪の形、もしくは0度～360度の範囲で表示される
  • 彩度→色の鮮やかさの度合い　数値が低いと彩度が低く、高いと彩度が上がる
  • 明度→色の明るさの度合い　数値が低いと暗くなり、高いと明るくなる

RGBカラーがRed、Green、Blueの色数値を少しずつ調整して色を作るイメージだとすると
HSBカラーは色鉛筆を輪の形に並べて、好きな色を選び、色の鮮やかさや濃さを調整するイメージだと思います
こちらのカラーのほうが、より人にやさしい設計になっています。

どうやって使えばいいの？

Photoshop

カラーウィンドウのメニュー部分から「HSBスライダー」を選択してパレットを切り替えますps_hsb_select

ちょっと関係ないのですが、赤枠で囲っている部分について
パレットの左下にたまに出てくるこの警告マークは「CMYKカラーならこの色で表示されるよ」っていう警告です。
RGBのみで画像作成する際には特に気をつけなくてもいいみたいです。

ps
パレットを切り替えるとHSBカラースライダーに切り替わります。
H→色相です。色相間がまっすぐになっていると考えます
S→彩度です。数値を下げると彩度が下がります(白くなる)
B→明度です。数値を下げると色が暗くなります(黒くなる)

Fireworks

ウィンドウ＞その他＞カラーウィンドウを起動
カラーピッカーの上の「HSV」を選択
fw

Illustrator

スウォッチウィンドウから「スウォッチオプション」を選択
ai_hsb_select

ai

どうして便利なの？

HSB(HSV)カラーはRGBカラーと違い、色相をイメージしながら色を決めることができるので、色同士の効果や関係を考えながら色を選ぶことができます。
また、彩度や明度で微調整ができるため、同系色や単一のカラーでのグラデーションも簡単に取ることもでき、比較的色のばらつきがなく、統一された色を選択しやすいといえます。

まとめ

色相と色の濃淡、明暗でカラーの選択ができるHSB(HSV)カラーを使うと、RGBカラースライダーよりも自分の感覚どおりに色を選択することができるようになります。
また、色相を意識した色選びができるようになるので、より思い切った色選びができるようになりますよ(*´v｀*)

]]> https://taneppa.net/hsbcolor/feed/ 0 Web制作の大切な土台、ワイヤーフレームって何だったっけ？というお話 https://taneppa.net/what-is-a-wire-frame/ https://taneppa.net/what-is-a-wire-frame/#comments Tue, 15 Jan 2013 08:49:22 +0000 yukappa!(INO) https://taneppa.net/?p=7 はじめまして。今日から日々のお勉強ネタを書いていきたいと思います！
今日はWebの骨組み、ワイヤーフレームのお話です。

 

ワイヤーフレームって何だっけ？

ウェブサイトの内容を実際のページの配置におこしたもので、レイアウトの方向性を定めるため色や装飾を含めずに作るデザインの骨組みのこと。
手書きや、Webツールを使用したものなど作り方はさまざまですが
大切なのはページに挿入する要素や機能、情報などを決めることだそうです。
作っている途中で「この配置は違うなあ」とか「もっといいアイデアが出た！」となったら変更される可能性もあります。

 

グラフィック面のデザインはフレームのあとで

ワイヤーフレームにはグラフィック的要素は入れないようにします
その理由は

  • 基本的なページの構造が決まらないまま、色やデザインの方向性などに話がそれてしまう可能性がある
  • いきなりビジュアル面からデザインすると、機能面への配慮が足りなくなる可能性がある
  • 内容を見てもらえるのでからも広く意見を受け取れるようになる

「何を伝えるか」「わかりやすく伝える配置かどうか」「使いやすいページかどうか」を
スムーズに決めるため、見た目のデザイン(装飾)よりもワイヤーフレーム（設計）を先に
作る必要があるのですね。

 

どうしてワイヤーフレームが必要なの？

ワイヤーフレームが必要な理由とは

  • 仕事にかかわる人みんなに「どういうウェブサイトを設計するか」ということを認識してもらえる
  • サイトのモックアップとして、クライアントさんとのやり取りを円滑に進める材料となる
  • 装飾面にかかわるデザイナー、内容を構築する開発者双方がワイヤーフレームを元に仕事を始める

チームで仕事をする場合や、クライアントさんと相談する際、全員に同じ完成図を思い描いてもらうためにも必要なものとなります。

 

何を意識して作ればいいの？

  • コンテンツに優先度をつけ、ファーストビュー(ページが表示された時に見える範囲)に最も見てもらいたい内容が入るようにする
  • 広告や目を引きたいバナーを配置する場合、どう配置したらクリックしてもらえるか、
  • ユーザー目線になって導線を考える
  • Webでの視線の動き(F字型が多い)を意識した配置を心がける

○よい例

  • ユーザビリティ(使いやすさ)を意識した配置になっている
  • バナーの文言や、文章などが完成ページをしやすいようにある程度わかりやすく記されている

×あまりよくない例

  • かなり大まかな枠だけ配置する(テキストや画像の情報が足りないとレイアウトを考えにくい)
  • 広告を目に付きにくい下部に集中して表示する(見てもらえる可能性が低くなる)

 

ワイヤーフレームのサンプルサイト

I ♥ wireframes
i-love-wireframes

スマートフォンサイトからWebまでワイヤーフレームサンプルが豊富！

web.without.words
webwithoutwords

既存のサイトをワイヤーフレーム化してくれています。

WireframeShowcase
wireframeshowcase

ワイヤーフレームと完成ページを比較できます。

 

まとめ

ワイヤーフレームは、Webのレイアウトを一度骨組みという形におこすことで

  • 完成のイメージを共有する
  • グラフィック無しのシンプルな配置で確認することで、レイアウトや機能をしっかり考える事ができる
  • 土台をしっかり固めることで後々のデザイン作成がぶれずに作業を進めることができる

ワイヤーフレームを作る上では、慣れや経験もとっても大切です！
普段からWebサイトを見る際、使いやすさや配置について意識してみましょう！(私もがんばります…！)

]]> https://taneppa.net/what-is-a-wire-frame/feed/ 0