タグ

webデザインと2016年に関するdaabtkのブックマーク (2)

  • 斬新なのに効果的!最近流行している「非平行ヘッダー」の作り方

    ホームページの冒頭で、視線を引きつけて大きく印象づけるためにヒーローと呼ばれる画像とキャッチコピーを添えた見せ方をする部分があります。 通常、ヒーロー部分に限らず、多くの区切り目部分を平行に区切っていきますが、あえて四角形のように直線的に区切らずに、曲線や斜めの線などを使って区切っていくデザインが徐々に増え始めています。 今回は、最近よく見かける非平行ヘッダーの実装の仕方を、チュートリアル形式でご紹介します。 長方形で囲むヒーローヘッダーは比較的作りやすいのですが、非直線のヘッダーはどのようにして作られるのでしょうか。 作成手順を見てみましょう。 非平行ヘッダーとは? 非平行ヘッダー(Non-paralleled header) (非長方形ヘッダー(Non-rectangular header)とも言います)とは、その名の通り2つの平行線で囲まれていないヒーローヘッダーのことをいいます。

    斬新なのに効果的!最近流行している「非平行ヘッダー」の作り方
  • Webサイトの定番レイアウトパターン6選【サイドバーデザインも!】

    Webサイトのレイアウトの種類はたくさんありますが、定番のレイアウトはだいたい決まっています。昔から2カラム、固定サイドバー、固定ヘッダーなどがよく使われていて、最近は1カラムを採用するサイトが増えてきました。 そこで今回は、Webデザイナーがサイトのレイアウトを考える上で、最低限押さえておきたい代表的な6つのパターンについて、それぞれの特徴とメリット・デメリットを解説します。 目次 すっきり見せられる1カラムデザイン 回遊率を上げやすい2カラムデザイン 3カラムデザインなら情報量を増やせる 画像メインのサイトに!カード型デザイン 見せたいコンテンツが決まっているときは固定サイドバー 固定ヘッダーで直帰率を改善 まとめ すっきり見せられる1カラムデザイン 画像引用元:http://pas-pol.jp/ 1カラムはサイドバーのないレイアウトです。スマートフォンサイトではサイドバーを配置しに

    Webサイトの定番レイアウトパターン6選【サイドバーデザインも!】
  • 1