広告やバナーを製作する際、大切なのが読み手に「インパクト」を与えること。どうやったら目を引く広告がデザインできるのか・・。そう悩むデザイナーの方も多いのではないでしょうか。 そこで今回は、Illustratorの基本操作だけでできる、簡単な表現技術をいくつかご紹介します。 枠からはみ出す 画像リンク：mebic.com こちらはとてもシンプルにインパクトがだせる方法。広告サイズが決まっていると、「この枠の中に情報を収めなければ」と考えがちですが、きちんと可読性さえ残しておけば、すべてを枠の中に収める必要はありません。広告枠からどーんとはみ出せば、広告全体に勢いをつけることができます。 画像リンク：countach.tv こちらのルーツの広告もそうですね。街にある広告などをよく見て回ってみると、「枠をはみ出す」という効果は以外と使われています。今回ご紹介する広告のいくつかにも適用されているの

画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。 以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 共通のHTML・CSS サンプルで使用しているHTMLとCSSは下記をベースとして使用しています。 スタイルの中には幅や高さを指定している部分やラインの色を指定している部分などあるので、紹介しているものを使用する場合はこれらを自身の環境に合わせて調整してください。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { dis

@JUNP_Nです。毎年恒例になっている「フリー写真素材配布サイトまとめ」ですが、昨年より紹介サイトはかなり増え国内外あわせて144サイトになりました。これだけのフリー写真素材配布サイトがあれば、必要な写真はどこかで見つかりそうです。 国内のフリー写真素材サイト国内のフリー写真素材サイトは新しいサイトが増えるということは多くありませんが、2015年は「GIRLY DROP(ガーリードロップ)」が公開されました。国内のフリー写真素材サイトを僕が確認できている限りでは以下の現在42サイトです。（他にもあったら教えて下さい）※「MIKA☆RIKA」は2015年12月31日以降はロゴをつけることが必須で、ロゴをつけても2017年12月31日までしか利用できないため、「フリー素材」とは呼べないと判断しているので掲載していません。1. ぱくたそぱくたそ - フリー写真素材・無料ダウンロード2. GIR

This domain may be for sale!

どうも、進捗とかスケジュールって言葉が大嫌い苦手なフリーランスのたけです。 面白いエントリが話題になってたので、いっちょかみしてみます。 フリーランスに仕事を頼むなら、多少値が張っても「仕事が早い人」に頼む。 1週間・1ヶ月で80万とか270万とか、プログラマの方を想定されてるのでしょうか、80万の見積を書いただけでもビビる零細フリーランスとしては、羨ましい限りです。 元エントリを読んで、どうも微妙な感じがしたので、制作者側からの意見を述べてみます。 そもそも見積の時点で相手のスキルを判別するには？ そもそも正確なスケジュールを出すには、正確な工数の見積が必要で、正確な工数の見積には、ひっくり返らない仕様が必要です。ひっくり返らない仕様を屏風の中から出してください。 発注前に、どれだけガチガチに仕様が決まっているのでしょうか。見積の段階で出したスケジュールがどれだけ速いか、それでスキルがわ

こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 最近読んだ本は、桜庭一樹の「私の男」です。 少しブルーな気持ちになりました、よろしくお願いします。 さて、Webデザインの表現の幅が広がってきた昨今では、徐々に紙媒体、特に雑誌に近いサイトデザインが増えてきたように感じています。 そこで今回は、以前からあったデザイン手法の1つではありますが、写真と文字を半分重ねた雑誌風のデザインのサイトを紹介していきたいと思います。 それでは、いってみましょう！ 企業サイトから個人のポートフォリオサイトまで、ビジュアルも目的もさまざまです。 1. R+Co http://www.randco.com/ マイアミ発祥のヘアースプレーやオイルを生産している企業であるR+Coのサイトです。 動画の上に文字を配置するデザインに目をひかれます。 ローディングごとに文字の色が変わる遊びも良いですね

年の瀬ですね。今日あたりで仕事納めの方が多いのでしょうか。今年も一年お疲れ様でした。 ところで、今日こんな記事をSNSで見かけました。 【超基礎】デザイン苦手なディレクターが依頼時に気にすべき7つのポイント | Webディレクターズマニュアル 唐突ですがみなさん… ・デザイナーから上がってきたデザインがイメージと違っていた ・ワイヤーを装飾しただけみたいなデザインが出てきてしまった なんて事態に困ったり、迷ったりしていませんか？ 僕自身も上記の質問に「そんなことあるわけ無いじゃん」と言ってみたいところなんですが、残念ながら…。 というわけで、今回は僕が超苦手としているデザイン制作依頼時に、なるべく失敗を起こさないよう必死で気をつけているポイントを紹介しつつ> > 反省してみようかと思います。 なかなか面白いのでぜひ読んでみてください。 「デザイナーから上がってきたデザインがイメージと違って

こんにちは。まだまだ半人前ですが、元気にWebディレクターやってます。まっつんです。 唐突ですがみなさん... なんて事態に困ったり、迷ったりしていませんか？ 僕自身も上記の質問に「そんなことあるわけ無いじゃん」と言ってみたいところなんですが、残念ながら...。 というわけで、今回は僕が超苦手としているデザイン制作依頼時に、なるべく失敗を起こさないよう必死で気をつけているポイントを紹介しつつ反省してみようかと思います。 ※ちなみに今回のモデル案件は広告ランディング用のLPページデザイン作成（マークアップは別）を想定しています。 1. 制作するページの目的をクライアントと共有する そもそもの話になりますが、なぜそのページを作成するか。「目的」の話です。 デザインを作る最初の段階で「どんなターゲットに、どんなサービス・商品を、どのようにしてほしいのか」が明確でないと、どういう構成・内容でページ

みなさん、こんにちは。 MISAOのエンジョイ担当の松本です。 今回のブログは最近SNS等でバズっているフリー素材アイドルさんの記事を読み、MISAOでもフリー素材を世界に提供し、より多くのWebクリエイターさんに貢献したいとの思いで書かせていただいたブログです。MISAOから世界にフリー素材を提供し、貢献したいと立候補していただいた、DEV☆SAN二人に手伝ってもらいました。 実際のWEBサイトはこちらから コンセプト 「もっと多くの人に、DEV☆SANのことを知ってほしい！」 そんな願いから、私たちは肖像権にサヨナラをし、フリー素材インド人になることを決めました。 日本の企業の方も、個人の方も、ここにある素材を自由に使っちゃってください！ 広告でも、カタログでも、同人誌でも、MAD動画でも、何でもOKです！ いろんな私たちを世の中に出していってくれたら嬉しいです♪ ※フリー素材インド人

参照：Leo Chuối ユーザー目線のデザインてどんなものだろう、と考えていた所、海外のWebデザイン研究サイト"onextrapixel.com"から面白い記事を見つけましたので、以下に翻訳してご紹介します。 （参照：Why Designers Should Design to Incite Emotions） ユーザーの心に響くウェブデザインとは ユーザーをひきつけるウェブサイト 感情を動かす・心に響くデザインの実現は、Webサイトの訪問者に格別なユーザーエクスペリエンスをもたらす最もパワフルな方法です。数年前までは、Webデザイナー達が気を払うべきは幾分か基礎的な事で済みました。例えばデザインをスタンダードなWebサイトに寄せて行くとか、明快なナビゲーションを付けるとか、適切なレイアウトやフォントを選択するといったことです。 広がるWebデザイナーの役割 しかし、現在ではWebデザ

どうも。先日、友達の子どもの誕生日に、ディズニー映画の「アラジン」っぽい感じで誕生日カードを作ってと頼まれた、やなぎさわです。 そんなフォントあるのかと、色々探していたら、ディズニー映画のタイトルっぽいフォントをダウンロードできるサイトを見つけましたので、いくつかご紹介します！ それと、全然ディズニーと関係ないフォントも見つけたので、最後におまけで記載しておきます。お楽しみに！ 『アラジン』風フォント 陽気なランプの精がツボです。 ライセンス：個人商用使用可 ＞＞フォントのダウンロードはコチラから 『101匹わんちゃん』風フォント この映画で犬が好きになりました。 ライセンス：個人商用使用可 ＞＞フォントのダウンロードはコチラから 『不思議の国のアリス』風フォント ウサギを追いかけるのは注意しましょう。 ライセンス：個人使用のみ ＞＞フォントのダウンロードはコチラから 『カーズ』風フォント

絵を書くのが絶望的に苦手な@chihayuu_です。リンゴの絵を書いたつもりが、ジャガイモと言われるレベルの画力なんです。 そんな僕だってブログに絵を入れたい時があります。 見出しに画像を挿入してみたり、文中に絵を挿入したり・・・色々したいのに画力がなくて困っています。 皆さんもそんな経験ありませんか？ そんな人達を救済してくれる、良質なピクトグラムが揃っているサイトを紹介しようと思います。しかも無料で利用出来るやつを。 ※無料で商用利用可の所を紹介しますが、ライセンス記載が必用な物が含まれています。ご利用の際には随時確認お願いします。 The Noun Project NounProject 様々な種類のピクトグラムが揃っています。 利用するにはアカウント登録が必用です。 Endless Icons Endless Icons | Free Flat Icons and Creative

ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過

2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって

Jリーグはスマホで見づらいサイトが多いなという日頃の印象を確認するため、淡々とスクショを撮ってみた件。 Tweet Share on Tumblr カテゴリ:サッカー 2014年09月02日12:57 字が小さくて読めぬというジジイへの入り口！ 今日は前々から気になっていたことについてです。僕は最近スマホをいじることしか出来ない人間となっています。朝起きれば枕元のスマホをいじり、会社に行けばトイレでコソコソとスマホをいじり、歩いているときもスマホをいじり、家に帰ったらテレビを見ながらスマホをいじる。せがれをいじるかスマホをいじるか、その二択の生活です。 そんなスマホ生活の中で、時折感じていたことがあります。それは「Jリーグ情報はスマホで読みづらい」ということ。別にJリーグの話だけを調べているわけではないのですが、バズっている話題についてウェブサイトを見に行ったとき、「読みづら！」「小っさ！

こんにちは、工藤です。 今回はログイン画面のデザインを調べてみました。 何気ないんですけれど実はよく見る画面なのでもっと意識しないとなーと思うのですがつい後回しにしてしまったりします・・。 サムネイルクリックでログインフォームに飛びます。 シンプルなログインフォーム シンプルな背景に、ログインフォームが中央においてあるタイプです。 最近はフラットなものが多い印象があります。 evernote Rdio Simple magisto wordpress Google Favors.me ログインフォーム+新規登録などの誘導 ログインフォームにプラスして大きく新規登録への誘導や使い方などを説明しているタイプです。 はじめてサイトを訪れた方にもわかりやすく、親切ですよね。 Twitter Facebook nanapi ポップな印象のログインフォーム 背景にイラストを置いてみたり、他とは違う印象

ランディングページの製作時、せっかく時間をかけて完璧な構成案を作っても、デザインがイケてない仕上がりになってしまった！ 何度も出し戻しが発生して時間がかかり過ぎた・・・という事はありませんか？ それはもしかしたら、あなたの思い描くイメージが、デザイナーにきちんと伝わっていないからかもしれません。 今回は、クライアントとデザインイメージを明確に決め、またそれを制作会社に正しく伝え、イケてるランディングページに仕上げるコツをお伝えします。 私は日々、クライアントと構成を詰めたり、制作会社にデザイン指示をしたりしていますが、これらの事に意識をしながら指示を出す事で、ぐずぐずと議論が長引いたりすることなく、思い描いていた通りのデザインが1発で返ってきたりと、かなり作業時間を短縮した上で双方が満足する成果物を出せるようになりました。 CVRを高めるLPOチェックリスト16選 1. デザインの方針を整

広告バナーって「ひとつや2つくらいすぐできるだろう」と思っていても案外時間がかかってしまいますよね。 Webサイト制作と同じように配色やレイアウトなどの一つひとつに迷ってしまう方も多いと思います。 仕事ですぐに使えるAdobe Photoshopデザイン実践講座【オンライン受講可】 実は私も最近までバナーを制作するのに2時間以上かかっていました。しかし「どうすれば速く簡単にバナーを作るのか」を繰り返し試行錯誤する中でやっと見つけたのがこの方法です。この方法を身につければ誰でも1時間足らずで効果の高いバナーを量産することができると思います。 各制作ステップの見出しの横に実際にその作業にかかった時間も記載していますので、これをひとつの制作時間の目安として参考にしてください。 またこれまでに公開しているバナーの基本ルールやレイアウトの記事も紹介しておりますので、そちらも合わせてご覧いただけるとバ

どうすれば「リッチな」印象のページになる？ ランディングページの製作時、デザインを「こんな印象のページにしたい」というのはあっても、いざ「どんな配色で」「どんなフォントで」「どの程度の派手さで」を決めるとなると、一体どうやったら自社のターゲットに適したデザインに仕上がるのか分からない！ ということはありませんか？ 今回は、「可愛らしい」「真面目で冷静な」「先進的な」「信頼感のある」といったイメージ・印象ごとに、適した配色・フォント等デザインを実際のサイトを例に出してご紹介します。 あなたの「こんな印象を与えたい」という思いをデザインにするとこうなる！ というのを具体的にまとめていますので、デザインの方針を立てる上での参考にしてください。 ※ランディングページ改善に重要な要素を大きく4つに分け（ファーストビュー、ライティング、導線、その他のポイント）それぞれの項目で訴求ポイントのチェックが行