Webにおいての理想的な行間とは？｜株式会社アクトゼロ｜クリエイティブブログ
おはようございます。お久しぶりです。GWもあっという間に終わり…いつもの忙しい日常が帰ってきましたね…。これから梅雨という少し憂鬱な季節がやって参りますが、適度にゆるーく乗り切りましょう！ 今日は行間についての記事です。Webでは、行間のとり方ひとつで読みやすさが全く変わります。ですので、文章を配置する際は、それぞれのフォントサイズに適正な行間を与えてあげることが重要となってきます。 一般的な行間のとり方 一般的には、文字が小さいほど行間を広くとるのが読みやすく、逆に大きな文字は行間が狭くても読みやすいと言われています。それには、下記のような理由が挙げられます。 小さい文字の時に行間が狭いと、一度に複数の行が視界に入ってきてしまうため、とても読みづらくなります。 大きい文字の場合は、文字そのものが大きいので視界に入る行は比較的少なくなります。 そのため、多少行間が狭くても読みやすさに問題は
レイアウトの基本的な型と、レイアウトからデザインまでの流れ
Webサイトにおいて、レイアウトの基本的な型と、レイアウトからデザインまでの流れを簡単にまとめてみました。 レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。 また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。 レイアウトに影響を与える要因 レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。 情報階層の深さ →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など サイトの目的・属性 →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識（Wikiped
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
ログインフォーム製作時に個人的に参考にしたいデザインのメモ。
シンプルで柔らかい色合いのログインフォーム。なんと商用利用可能なPSDファイルだそうです。 （＊利用する際は必ずライセンスの確認をご自身でされてください） 参照元： Free PSD: Elegant Login Form Design | Premium Pixels 2:PSDfreemium 横長タイプのログインフォーム。サインインボタンの位置が右揃えではなく少しはみ出ています。反対側に配置してある「Lost Password?」も少しはみ出ているからバランス良く見えるのかな。 こちらも商用利用可能なPSDファイル。 （＊利用する際は必ずライセンスの確認をご自身でされてください） 参照元： Minimalist Login Form | PSDfreemium 3:wakoopa
効果的に「奥行き」をデザインに与えているウェブサイトのまとめ
ウェブデザインにスパイスを効かせる一つの方法に、奥行きを与える、があります。フラットなデザインではなく、エレメントを使って奥行きを作り出します。 そんな奥行きを効果的にとりいれたウェブサイトを紹介します。
効果的にコンテンツを配置する代表的な3つのレイアウトとは
ウェブデザインでもよく使用される、ユーザーの視線の動きを予測し、効果的にコンテンツを配置する代表的な3つのレイアウト、グーテンベルグ ダイアグラム、Zパターン、Fパターンを紹介します。 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 グーテンベルグ ダイアグラム Zパターン レイアウト Fパターン レイアウト Pattern of Focal Points -情報の階層化 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムとは、均等に配置された同種の情報を見るときの視線の動きを一般的なパターンにしたものです。 これは特に、テキストの比重が高いコンテンツにはまります。 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムは4つの象
一味違ったレイアウト&ナビゲーションデザイン集 – creamu
ありきたりのデザインをしたくない。 そんな時に参考になるのが、『Creative and Unusual Layouts and Navigation Designs』。一味違ったレイアウト&ナビゲーションデザイン集です。 特に面白いな、と思ったものをご紹介しますね。 26000 Vodka メニューが浮遊しながら、遠近感のある感じで表示される Sursly 横にスクロールしていくタイプのコンテンツ Lucuma ナビゲーションをクリックすると、画面が横にぐいーっと移動する Okay Dave ローディング後のアニメーションがとても美しいOkay Dave Andreas Smetana スクロールすると、すとんすとん、と画像が切り替わる。マウスオーバー時のアクションも気持ちいい Snuggle Fux レイアウトが斬新なSnuggle Fux Im Design 矢印キーで奥行きのあるイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
worldending.jp