前回のデザイナー視点で見る!イケてるバナーとトホホなバナー~これはトホホ編~ に引き続き今回は参考にしたいグッドデザイン編! 前回はあまり目に優しくありませんでしたが、今回はアイデアの種になりそうなバナーたちです。 縦に割る 写真を文字を分けることでスッキリとした印象になります。
前回のデザイナー視点で見る!イケてるバナーとトホホなバナー~これはトホホ編~ に引き続き今回は参考にしたいグッドデザイン編! 前回はあまり目に優しくありませんでしたが、今回はアイデアの種になりそうなバナーたちです。 縦に割る 写真を文字を分けることでスッキリとした印象になります。
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
2014-07-28 セッション記録:UXデザインのためのマテリアリズム 先日開催した「UX Tokyo Jam 2014」で行ったセッションについての記録。 公開対談の形式だったためスライドは無いが、知り合いがキーワードをまとめていてくれていたので、それを元に思い出せる限りで思い出し、書き起こしてみた。 話が飛んでいたりズレていたりする点もあるが、それも含めて素直に書いておこうと思う。 以下、書き起こし- 山本: 藤本一勇さんが書籍「情報のマテリアリズム」の中で、既存事業を何でもかんでもウェブに置き換えようとする今の情報技術中心主義社会を情報イデアリズムと呼び、批判していた。これについて考えてみたい。 参考)情報のマテリアリズム 山本:藤本さんの言うように、今の世の中は少し不便なことがあると、「それウェブでやればいい」「ウェブでやれば簡単じゃん」と安易にウェブに置き換えようとするきらい
Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge
皆さんは、満足したバナーが作れていますか? バナーは、自社サイトへの誘導やCVにつなげるための重要な役割を果たします。 しかし、限られたサイズの中で、ターゲットに刺さるバナーをデザインするというのはなかなか難しいもの・・・。 そこで今回は、効果が高い高品質なバナーを作成するために役立つ記事やサイトをご紹介します。 Webデザイナーやディレクターには特におすすめです。 効果の出るバナーの作り方の参考になる記事 実際に効果の出ているバナーの事例を参考にすることは大いに役立ちます。 下記で紹介している記事を読みつつ、実践していけば、効果の出る高品質なバナーを作れるようになるでしょう。 100種以上の自社広告運用でわかった!バナー広告クリエイティブ4つの基本 LINEが今までに運用してきた広告からわかった、効果の出るバナークリエイティブを作るためのポイントを紹介している記事。 実際にたくさんのPD
効果が出るバナーのレイアウトには一定のパターンがあります。 今回は成果を出せるバナーのテンプレートを20種、広告代理店でバナーを作成している私が作ってみました。 バナーのレイアウトでお悩みの方も、そうでない方も、イメージを膨らませたり、いざという時のためにストックしたり、自由に活用して頂ければと思います。 【eBook】コンバージョンする効果の高いバナーの作成方法 悩んだらまずは最強のベーシック型コピー・訴求文・写真などをバランス良く盛り込み、情報量が多いレイアウト。バナーの時点で多くの情報を伝えられるため、飛び先との整合性が高いことが特徴です。しかし珍しさやインパクトにかけるので、似たようなバナーにまぎれると埋もれてしまう恐れがあります。 ベーシック型バナーレイアウトベーシック型バナーサンプル ベーシックに負けない3つの王道レイアウト同じバナーを出し続けているとユーザはマンネリを感じてし
テキストメール制作時にポイントになるのが、罫線や囲み枠を用いた装飾部分である。読者の注目を引くのに有効なだけではなく、トピックの見出しに番号をふって目次を用意すれば、メールの可読性が向上する。これまでの記事の中で触れた改行やフォントの問題をクリアすれば、表現力豊かな装飾を施すことができるだろう。 そこで今回は、メルマガなどですぐに活用できる罫線や囲み枠を紹介していく。まずは、テキストメールの注意点をおさらいしておこう。 機種依存文字を除く 丸囲い文字やローマ数字、単位記号、半角カタカナなどは特定のパソコンだけでしか読むことができず、文字化けの原因になるため使用を避ける。フォントを意識したレイアウトを 等幅フォントがセオリー。メルマガ内に「等幅フォントでご覧下さい」と記載する方法もあるが、プロポーショナルフォントでもレイアウトが崩れないようにすることが望ましい。主要メールソフト/Webメール
実物に似た外観や質感の再現を目指したデザイン手法である「スキューモーフィズム」についてまとめた。さらにフラットデザインと比較することで、今後のスキューモーフィズムについて考えた。 スキューモーフィズムとは スキューモーフィズム(skeuomorphism)とは、別の素材に似せるためにデザインや装飾を行うことである。近年では主に、コンピューターシステムのUI(ユーザーインターフェース)において、実物に似た外観や質感の再現を目指したデザイン手法を指す。 skeuomorph(スキューモーフ)+ism(状態、行為、主義など)=skeuomorphism(名詞) skeuomorph(スキューモーフ)+ic(〜に関する)=skeuomorphic(形容詞) スキューモーフと重なる概念 メタファー 暗喩、類推させること。 ミメーシス 真似る事、似せる事。自然の模倣、価値のある物の模倣。 アーキタイプ
Sign up or Sign in to view personalized recommendations, follow creatives, and more.
2013-11-07 UI/UXデザインに関わる者なら見ておきたい記事とスライド10選 今回はUI/UXデザインについて触れてある記事やスライドで自分が実際に読んで参考になったと思ったものを備忘録としてまとめました。実際にUI/UXデザイナーの人や、僕と同じくUI/UXデザイナーを目指している人、また実際に興味がある人のお役に立てたら幸いです。 記事1 UI/UXの違いについて 5分でわかるUIとUXの違い : Excite Designer's Blog そもそもUIとUXは何が違うのかという事を知らない人もいると思います。 まずはUIとUXの違いについてはっきり知らなければなりません。 記事2 なぜUIとUXがよく混同されてしまうようになったのか UXとUIが混同されるワケ : could UIとUXが混同されてしまう理由について触れてある記事です。 僕も最初はUIとUXを混同
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
Keep it Simple – これはAppleのデザインに対する一環したフィロソフィーである。全てをシンプルにする事。それが彼らの中心的な考え方になっている。 実は、彼らに限らずよく海外のデザイン業界では下記のフレーズが頻繁に使われる: Less is more – より少ないことは、より豊かなことEverything you need, nothing you don’t – 必要なものだけPerfection is achieved when there is nothing to take away – 完璧とはこれ以上削れない状態の事であるこれらはシンプルである事がどれだけ重要であるかを端的に表現している。 もしデザインの仕事が問題解決の為のクリエイティブなプロセスだと定義するのであれば、その方法論はシンプルである事に超した事は無い。言い換えると、最も効率的なプロセスで物質の本
iOS7の登場で、フラットデザインへの関心はますます高まっていることでしょう。 ここではそんなトレンドは一切無視して、UIデザインにおける立体表現を行う上で、おさえておくべき大切なポイントをまとめてみました。これらをマスターして、時代に逆行するゴリッゴリの立体表現を行えるようになりましょう。 セオリー1:現実世界の「光源」の基本ルールを守る 唐突ですが、この2つのボタン、立体表現としてどちらが正しいと思いますか? 左側、「A」のボタンには、以下のような光源の矛盾があります。 ボタン本体の影は、右下に付いている。つまり、光源は左上。 へこんだAの影は、右上に付いている。つまり、光源は右上。 ドロップシャドウは、真下に付いている。つまり、光源は真上。 一方のBは、すべての要素の影が、光源が上の表現になっています。つまり、正解はBです。そしてこれが、現実世界での「光源」(=影)の基本ルールです。
近年ウェブデザインに関する様々なテクニックや理論が注目されているが、ユーザーを引きつけるデザインとはなんだろうか。意識してこのサイトのデザインが好きだからと選ぶ人もいるが、大抵の人は無意識に感覚で選ぶことが多い。 私がデザインを勉強していて思うことは、無意識に選ばれるデザインこそが一般ユーザーから見た客観的なユーザビリティを理解したデザインができていると思う。使いやすさはユーザーに選ばれる一番の理由である。 さらに、彼らの心をつかむには感情に訴えるデザインも大切である。論理的に文字で訴えることも大事だが、ビジュアルなどを使って感情に訴えるデザインはサイトを見ている人との距離を縮めることができる大切なポイントである。 選ばれるウェブデザインはいくつかの点に注意すれば作ることができる。その為には今から紹介する9つの基本的なルールと感情に訴えるデザインがキーポイントとなる。 1. ゴールを明確に
以前地球誕生の歴史について記事を書いたことがあります。 このきっかけとなったのは娘の何気ない質問「あの山、どうして高いの?山ってなんでできるの?」という好奇心でした。セミナーでも笑い話としてお話しました。 山について調べるには地球誕生の歴史から知る必要があり、1週間かけて調べました。その結果、娘にそこから話すとなると、「ふ~んよくわかんないや」という結果になったのです。 さて、これは大きな敗北であり、どれほどの知識を詰め込もうと、それを伝えられなければ何の意味もないということです。実はこの話には続きがありまして、私がこの後、いかにして娘に「あの山の存在」をキチンと伝えることができたのかをお話致します。 キーワードは「つかみ」 人とのコミュニケーションにおいて、入り口、いわゆる「つかみ」というものが重要だと私は考えています。 「つかみ」とは、こちらの話しを相手に聞いてもらうためのはじめのきっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く