目次

• Dummy HTML snippets for webdesigners
• すぐ使えるダミーテキスト – 日本語 Lorem ipsum
• Lorem Ipsum
• Web制作小物ツール
• WEB制作時に役立つ！ダミーテキストに使える定型文まとめ | 東京上野のWeb制作会社LIG
• なんちゃって個人情報

おすすめサイト一覧

Dummy HTML snippets for webdesigners

https://www.blindtextgenerator.com/snippets

マークアップされたダミーテキストが用意されています。左側のスニペットを右側へドラッグして、ダミーテキストのカスタマイズもできます。

https://www.blindtextgenerator.com/lorem-ipsum

上記と同じサイトですが、段落数やワード数を設定して　ダミーテキストを生成することもできます。

すぐ使えるダミーテキスト – 日本語 Lorem ipsum

https://lipsum.sugutsukaeru.jp/

夏目漱石「私の個人主義」や宮沢賢治「セロ弾きのゴーシュ」などのダミーテキストが用意されています。改行や段落タグの有無や、全角や半角の設定などもできます。

Lorem Ipsum

https://www.webfx.com/web-design/html-ipsum/

マークアップされたダミーテキストが用意されています。

Web制作小物ツール

https://webtools.dounokouno.com/dummytext/

坊ちゃんや徒然草、lorem ipsumなどのテキストが用意されています。文字数を指定できるので、必要な文字数が決まってるときにおすすめです。

WEB制作時に役立つ！ダミーテキストに使える定型文まとめ | 東京上野のWeb制作会社LIG

見出し用のテキストや、新着情報で使えそうな文言など、パーツごとに用意されていいて、便利です。

なんちゃって個人情報

http://kazina.com/dummy/index.html

名前やメールアドレス、年齢などの個人情報を擬似的に作ったものの一覧を生成できるサイトです。

まとめ

いかがでしたか？
ダミーテキストが必要な時もあると思いますので、ぜひ利用してみてくださいね(^^)b

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

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

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

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

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

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

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

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

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

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

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

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

○よい例

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

×あまりよくない例

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

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

I ♥ wireframes

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

web.without.words


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

WireframeShowcase


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

まとめ

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

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

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