Webサイトのメインビジュアルの構図を集めて分析してみた。｜ameko
初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった
モックアップをツールで作成！ぶれないデザインを生み出す方法を解説
4.ツール選定までのスケジュール案 いいツールを選ぶためには、スケジュール感を持って進めることも大事です。 いくつか無料トライアルから始めるかと思いますが、通常の仕事を行いながらツール選定するのは時間がかかります。計画的に進め、最短でツールを選定しましょう。 ＜ツール選定スケジュール案＞ 2月 優先順位の洗い出し 3月 ツールのトライアル〜ツールの選定 4月 運用開始 ※もし自社サーバーでの導入を検討される場合は、より長い期間の確保が必要です。 5.モックアップ作成ツールのご紹介 では最後にツールのご紹介をします。主要なツールはこちらに網羅されていますので、下記のリストから検討を始めてみてください。 5-1. オンラインツール 5-1-1. moqups ユーザー数：100万人以上 プラン：登録不要で無料で利用できるが一部機能制限あり 料金：月額約¥1,500〜 特徴：UIは英語だが、あら
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
［CEDEC］「STREET FIGHTER V」のアートディレクションに見るイメージイラストを3Dで再現するカプコンの秘伝
講演者の亀井敏征氏（カプコン第二開発部 第一開発室）は，前作「STREET FIGHTER IV」（以下，SFIV）の開発にも携わった人物だ。SFIVではゲーム本体の開発を担当したディンプスに所属していたが，現在はカプコンに移籍している 格闘ゲームの老舗ブランド，「STREET FIGHTER」シリーズの最新作「STEERT FIGHTER V」（以下，SFV） は今年2016年2月に発売され，今やe-Sportsの格闘ゲーム部門では定番のタイトルとして人気を博している。CEDEC 2016では，そんなSFVのグラフィックス関連の開発秘話をまとめたアートディレクションに関するセッションが行われたのでレポートしよう。セッションタイトル名は「Street Fighter V Art Direction〜 格闘ゲームのアートの役割 〜」で，講演者はカプコン第二開発部 第一開発室の亀井敏征氏だ。
デザインは第一印象が大切！5秒でできる3つのデザインチェック方法 | Webクリエイターボックス
2016年5月10日 Webデザイン, ユーザビリティ, 色彩 人間は一瞬で物を識別します。研究によると、たった0.1秒で人を判別できるようです。Webサイトにおいても同じことが言え、ユーザーはWebサイトを開いて0.05秒でそのサイトが好きかどうかを判断し、そのサイトを見続けるか、閉じるかを決めるそうです。そんな大切な「第一印象」。どのようにチェックすればいいのか、考えていきましょう！ ↑私が10年以上利用している会計ソフト！ ぼかしテスト ぼかしテストでは、デザインをぼかした状態で確認し、強調するべき箇所が強調されているかをチェックします。 テスト方法 Photoshopを使う方法と、ブラウザーを使う方法があります。 Photoshopを使う方法 バナー広告やWebサイトのスクリーンショット画像を用意 Photoshopで フィルター＞ぼかし＞ぼかし（ガウス）で5〜10pxほど画像をぼ
まだCMYKで消耗してるの？〜大幅な色補正をCMYKで行ってはいけない理由〜
カッとなってつけた（タイトル）今は反省している。 正確には、「CMYKモードでの色調補正は微調整に止めるべき」理由、です。入稿データを問答無用でCMYK変換してから補正する方に向けて書いてます。 注意）この記事にはCMYK変換方法についての内容はありません。
Devices — Facebook Design Resources
Designing for many platforms Facebook supports a diverse audience around the world and an equally diverse set of devices. To emphasize that in our design mocks, we redrew a range of devices to show the global diversity of the people using our products. Each device comes with a bitmap of the device (with and without shadows) and the original Sketch file for that device. We'll release different cate
アプリのUIデザイナー必見！ 参考になる海外ギャラリーサイト9選
アプリのUIデザインをまとめたギャラリーサイトを紹介します。デザインのアイデアが思いつかないときや、アプリのUIをさらに改善したいときに参考になりますので、ぜひチェックしてみてください。 CAPPTIVATE.co http://capptivate.co/ アプリのUIを動画で見ることができるサイトで、画像をマウスオーバーすることで自動的に動画が再生されます。UIのパターンやバウンド、イージングなどアニメーションの効果でも探すことができ非常に便利です。「Capptivate.co」のiOSアプリも配信されているので、こちらもおすすめです。 UX Archive http://uxarchive.com/ 「ログイン」や「商品の購入」などユーザーの各行動フローに注目したギャラリーです。ひとつの行動フローが複数枚の画像で表現されています。アプリの機能を考えるとき、どのような画面・項目が必要な
iOSアプリの小粋なアニメーションを紹介する『App Animations』 | 100SHIKI
これは参考にしたいかも。 App Animationsでは、iOSアプリで見られるちょっと素敵なアニメーションを紹介している。 すべて動画で紹介されているので、インターフェースを作っている人は参考にしてみるといいだろう。 現在のところ58のパターンが紹介されているようだ。 ユーザー登録をするとお気に入りで管理していくこともできるので興味がある人はチェックしてみるといいですね。
もはや芸術！SVGアニメーションの巧みな活用方法20選
更新日: 2017年3月1日公開日: 2015年10月9日もはや芸術！SVGアニメーションの巧みな活用方法20選 なんだか最近ハイセンスなwebサイトで見かけることが増えてきた「SVGアニメーション」。動画やGIF、CSSでは表現できないような“動き”を軽やかに演出しています。そこで今回はSVGアニメーションを使っているサイトや参考になるソースをピックアップしてご紹介していきたいと思います。 イベント要素をプラスした「BoonconPIXELS」 BoonconPIXELS グラフィック・デザイナー集団の booncon PIXELS。ページトップのアニメーションがキュートですが、さすがと思わされるところに、SVG アニメーションの中にイベント要素を盛り込んでいます。左上の文字と左方の PC 画面らしき画像をクリック or タップすると文字やカラーが変わります。なかなか遊び心があって、参考
新しさ満載！GIFアニメーションを効果的に使ったwebサイト6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 今回はGIFアニメーションについてお話させていただきます！ GIFアニメーションは、複数のGIF画像をつなげてパラパラマンガのようにWEB上で動きをつける表現手法のことです。 昔からある手法なので古くさいイメージを持たれている方もいるかもしれませんが、手軽でブラウザを問わず閲覧することができ、その表現力の幅広さからGIFアニメーションは長年愛され続けています。 特にFLASHの人気が低迷してからは完全復活しましたね。 そんなGIFアニメーションを効果的に使用したWEBサイトをご紹介させていただきます。 GIFアニメーションを効果的に使用したWEBサイト 卤猫 http://www.oamul.com/ 海外のイラストレーター＆アニメーターOamul Luさんのポートフォリオサイトです。 とにかくイラストの雰囲気がとても柔らかくて癒されます。 ポートフォ
ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方
色が変わるサイトロゴを簡単に。 休むことなく働き続ける、一生懸命な画像。 「GIFアニメーション」という存在だとは知っていても、他には何も知らない。 時間をかけて、特殊な技術で作ったんだろうなー なんて、無意識に思っていませんか？ 少なくとも、自分には作れるシロモノじゃないよなー なんて、無意識に思っているでしょう？ 全然、そんなことないです。 いきなりアクロバティックなアニメーションは難しくても、基本的なものの作り方が分かれば後はアイデア次第。ひとつ知ることで、これまで見かけてきたGIFアニメたちの見方も変わってくるはずです。 ロゴ作成を通してGIFアニメを知る 今回は、基本的なGIFアニメの作り方を【WEBサイトのロゴ作成】を例に紹介します。 コンセプトにもよりますが、WEBサイトのロゴが動きすぎているとそればかり気になってしまい、あまりよろしくありません。目を引く程度にチラッと変化す
フラットデザイン： 起源、問題、フラット2.0のほうが望ましい理由
フラットデザインとは2012年ごろに広まったWebデザインのスタイルである。それは広く今も利用されているが、過度な利用は深刻なユーザビリティ上の問題を引き起こしかねない。フラットデザインによって発生するユーザビリティ上の最大の課題の1つに、クリック可能な要素のシグニファイア不足がある。フラットデザイン2.0は、それに対する優れた解決策を提供してくれる可能性がある。 Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users by Kate Meyer on September 27, 2015 日本語版2015年11月2日公開 フラットデザインは人気のあるデザインスタイルで、Webページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないもののことである。それは多くのデザイナーからWeb
デザイン性の高いUIデザインを100日紹介するサイト「100 Days UI」
デザインベースを作り上げるのに必要なUI設計。またその先の設計に基づいたデザイン性のあるクリエイティブも重要となってきます。今回はそんなシーンで参考にしたい、デザイン性の高いUIデザインを100日紹介するサイト「100 Days UI」を紹介したいと思います。 いろいろな種類のデザインUIがピックアップされリストギャラリーとなり紹介されています。 詳しくは以下 グラフやチャート、カウントダウン、プロフィール、ソーシャルシェア、電卓、選択画面など、ピックアップされている種類はとても豊富。デザインはスタイリッシュなタイプのものが多く、主流のデザインとして参考にするのに最適です。基本海外のデザインなので、日本のデザインと差を付けたい時にもおすすめです。 100日という形でうたっていることから、100で更新がストップしているようですが、ぜひ今後も続けてほしいプロジェクトですね。UI設計の参考事例を
海外で活躍したいデザイナー必見 デザインに関する英語表現と用語まとめ デザイン会社 ビートラックス: ブログ
こちらサンフランシスコ・シリコンバレー地域では、エンジニアだけではなくデザイナーの需要が非常に高まっている。 WebやアプリのUIや、プロダクト全体のUX,、AI活用によるデザインなどなど。そして、グローバル規模でのブランディングに至るまで、ビジネスの様々な局面において、デザイン的考え方が重要とされてきているのが理由である。 そして、少し前までは、”デザイナー”と聞くと絵を描く仕事の延長線上にあると思われていたが実はその仕事にとって重要な内容として相手を理解するコミニュケーション能力と自身の問題解決策を説明するプレゼンテーションも含まれる。 次世代のデザイナーは、クリエイティブな考えに加えて、異なるバックグラウンドを持つ人々の考え方を理解する能力が必要とされる。 【改めて基本を解説】デザイナーの役割とその仕事内容とは 実は、日本国内でも非常に優秀なデザイナーは多く、細かな表現技法や、最新の
ファーストビューの動きが面白いWebサイト20
2019年1月13日 JavaScript, Webデザイン 近年デスクトップ版のWebサイトでは、様々な動きをつけたエフェクトをよく見かけます。以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、今回はWebGL、JavaScriptなどで作られたアニメーションをメインに利用しているWebサイトを中心に紹介します。 ↑私が10年以上利用している会計ソフト！ JavaScriptライブラリー 実例紹介の前に、素敵アニメーションを利用するための便利なライブラリーをいくつか紹介します。 three.js ドキュメント｜サンプル集 揺れ動く布や、画面いっぱいに浮かぶ球体など、様々な3D表現を可能にするJavaScriptライブラリー。ホームでは実際に利用しているWebサイトが数多く紹介されています。豊富なサンプル集も必見です。 GreenSock ドキュメント｜サンプル集 ア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ログイン - はてな
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Amazingly Simple Graphic Design Software – Canva
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
