Webサイトのメインビジュアルの構図を集めて分析してみた。｜ameko
初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった
世界各国のWebデザインと日本のWebデザインの特徴
2013年10月29日 Webデザイン, 海外情報 私は今まで日本、カナダ、オーストラリア、イギリスと、4カ国での滞在経験があるためか、各国のデザインの違いについて尋ねられる事があります。しかし日本以外のすべての国は英語圏。Webデザインでいえば違いを感じたことはあまりありませんでした。そこで今回は今まで触れる機会のなかった言語圏のWebサイトを比較しました。アメリカ、フランス、サウジアラビア（中東）、中国、そして日本。それぞれのデザイン事情の違いを知って、日本のWebデザインについても考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ マクドナルド アメリカ 現在は全体的に濃い青をメインに使っていますが、これはキャンペーンによって変更されます。ナビゲーションバーやページしたのバナーエリアは基本的に固定。 例えば別のプロモーションページではこんな感じ。一番見せたいものをひと
Paletta - HSV Color Palette for Every Programmer
Palettaは顕色系 (色相, 明度, 彩度) をベースに「調和のとれた色」だけを集めたカラーパレットです. 色を選択すると, 周囲の色が同系統の色に変わります. 画面上部のResetボタンを押すと, 色の選択が解除されます. カラーコードをクリックするだけでコードをクリップボードへ簡単にコピーできます. 詳しく
色々なWebサービスの会員登録画面まとめ - no web service no life
多様化する会員登録画面 色々なWebサービスの会員登録画面を、導線やSNS連携ボタンの配置を主軸に分類してみました。 各サービス、会員登録CVRを上げるために、導線や提示方法を工夫しています。また、SNS連携が必須になってきたことによって、画面に占める要素が増えてきており、その配置方法にも工夫がみられ面白いです。 ※キャプチャ取得タイミングの関係で、古いデザインもあるかもしれませんがご了承下さい。 ポップアップ提示パターン Sumallyやpixivは、Cookie制御がされており、初回訪問時にアグレッシブにポップアップを提示してきます。 Sumally pixiv Blabo!やAirbnbは、会員登録リンクを押すとポップアップで提示されます。 Blabo! Airbnb SNS連携ボタンが上に配置されているパターン 通常の会員登録への導線やフォームの上に、各種SNSのボタンが配置されて
美しいWebデザインをタイプ別に！見ないと損するパーツ別ギャラリーサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
中型ライダー（二輪）免許を持っているライターの内藤です。 本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です！ 部品に特化した見本 部品に特化した見本サイトをご紹介します。 見出しデザイン（h1,h2,h3……その他DTPでも） はじめは見出しデザインに特化した見本サイトまとめ。 見出しデザイン.com http://midashi-design.com/ 見出しタグ（h1,h2,h3……）のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。 カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。 ヘッダー部分に凝っても見出しが適当だと全
レイアウトが考えやすくなるデザインのルール ｜https://wp.yat-net.com/name
デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真
リリースされたばかりのカラースキームツールが簡単・便利で使いやすい！ -Colour Code
Colour Code http://colourco.de/ 、いいドメインだ！ 使い方は簡単です。 カラーの変更 マウスの左右で、色相を変更 マウスの上下で、光度を変更 スクロールで、彩度を変更 ※スクロールはMagic Mouseじゃないとできないかも 基本操作 クリックで、カラーをロック ロックされた鍵アイコンをクリックで、ロックの解除 カラーをクリックで、保存して新しいカラーを作成 ゴミ箱をクリックで、カラーの削除 まずは、流行のサーモン（#F38268）を右上のボックスにセットしてみます。
「Webサイトの配色で困った！」→「HUE/360使えば良いじゃない」
Webサイト制作で避けて通れない配色の決定。芸術的素養が絶望的にないのでいつも泣いてるゴロドクさんです、どうも。 所詮素人には理論に基づいた配色など無理ゲーです。先日もちょっとしたデザイン的なゴニョゴニョという場面に出くわしましていつものように悩みつつ、なんか配色決定のためのWebサービスないかなーと思って探してたらこういうのを見つけました。 webでの色指定は基本的にRGB値での指定となりますがこれって光の三原色の混色なんですよね。 実際にCSSなんかで数値いじりつつデザインしてると「なんか違うなー」というときにもっと明るくしようとか、もっと彩度上げようってのが感覚的にどの数値をどんだけいじって良いのかってわからないんですよ。 RGB値直接いじって彩度上げようと思ったらくすんじゃった上に色みかわっちゃってオヤオヤ残念なんて日常茶飯事ですよ（いやそのまえにフォトショなりなんなりでデザインカ
「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
使いたいアイコンフォントを選んでWebフォントをカスタマイズ作成できるサービスいろいろ
新着記事