First impression : 人はWebサイトを見た瞬間に印象を決めている Webサイトを作成する際に、配色はなぜ重要なのでしょうか。はじめに下記Webサイトの配色を見てください。配色のみで、何かのブランドを想像できるでしょうか？ 上記のサイトは日本コカ・コーラ社のサイトです。この配色だけを見て何かしらのブランドが想像ができたならば、あなたは色を見てブランドのイメージを決めたということになります。それは、文章を1文字も読まず、配色だけで印象を決めたということですね。他にも、赤と白で配色されたブランドのロゴには以下のようなものがあります。 私たちは普段、新しいWebサイトを見た瞬間に「〇〇っぽいサイトだな」とか「〇〇系だな」など無意識にそのサイトを何かのカテゴリーに当てはめ、イメージを作っているのです。その全体的なイメージは色によるものです。 カナダのカールトン大学で行われた研究のレ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

こんにちは、デザイナーの藤田です。 デザインをやっていると、見出しのデザインに悩むことって結構ありますよね！ 自分のデザインストックを増やすためにも、今回のブログでは今っぽい見出しデザインをタイプ別にまとめてみました！ 独学でつまずいていませんか？ 現場で活かせるWebデザインを効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） ※この記事は2022年3月に編集部が情報を更新しました ジャンプ率パターン ミニマムなデザインでは見出しに過度な装飾を加えずに、本文に対し見出しの文字サイズを大きくすることで見出しを目立たせるサイト

こんにちは、デザイナーのまきこです。 iPhone6のディスプレイがバキバキに割れてしまってから、心を無にしてずっと使っていましたが、iPhone6sの発売により、最近はちょっとウキウキしています。 ところで、デザイナーのみなさんは、普段作業をしているときに「このままのデザインだと、なんかさみしい�」「もっとにぎやかにしたい」と思ったことはありませんか？ そんなときは、制作物に応じた「にぎやかし」をするのがもちろん良いのですが、いろいろ難しく考えるよりも、手を動かしてみたほうが早い、ということもありますよね。ということで今回は、デザインが「なんかさみしい」と思ったときに、だいたい3分あれば試せるデザインアイデアを7つご紹介します！ ▼ デザインアイデアに詰まったときはこちらもどうぞ。

普段スマートフォンやPCを活用されている方であれば、サイトの隅に表示されている「バナー広告」を見たことがあるのではないでしょうか。小さな枠に表示されている「バナー広告」には、クリエイターのアイデアや工夫が沢山つまっていることを皆さんはご存知ですか？今回は、様々な魅力や面白さが詰まっているウェブ広告のお仕事の内容と、クリックされる「バナー広告」の秘密をご紹介したいと思います。編集・執筆 ／ AYUPY GOTO 今回のデザインの先生はこちら！ 神蔵 麻鈴かみくら まりん Designer / Director / ArtDirector 株式会社セプテーニ メディアソリューション本部クリエイティブ部 2013年に武蔵野美術大学、視覚伝達デザイン学科卒業の後、株式会社セプテーニに入社。入社以降、デザイナー・イラストレーターとして業種を問わず幅広くクライアントワークに携わる。2014年には社内表

Webサイト制作時に作成する「ワイヤーフレーム」。デザイナーの方は、ディレクターからワイヤーフレームを受け取り、それを元にデザインに着手することが多いと思います。 では、デザイナーの方がディレクターにステップアップし、実際にワイヤーフレームを作成する側の立場になった際、どのような点を押さえておくべきでしょうか。“デザインのラフ案”のように作成してしまうと、トンマナを確認するものなのか、構成を確認するものなのかとクライアントが困惑してしまい、本来確認すべきポイントがかすんでしまうなどという事態に陥ります。 ワイヤーフレームの役割をきちんと理解した上で、プロジェクトの内容に応じて最適なワイヤーフレームを作成できるよう、基本的なポイントについて紹介します。 ワイヤーフレームはチーム全員のイメージを共有するツール そもそもワイヤーフレームとは、これから作り上げるWebサイトの設計図としてクライアン

Webデザイナーとして仕事を始めて経験が少ない時期は、誰でも思いもよらぬ注意をされたり、ミスをしたりするもの。その原因や解決方法を理解しているか否かで、今後の成長に大きく差が出ます。新人Webデザイナーの失敗あるあるとその解決方法についてまとめます。 ＜この記事に関連する記事＞ Webデザイナーのキャリアを考える【制作会社と事業会社の違い】 Webデザイナーに求められるスキルレベルは？未経験でも最低限必要なのは？ 初心者Webデザイナーの独学におすすめの本10選 目次 なんとなくデザインをしてしまう。その色・飾りを使う理由は？ Webディレクターのいいなりになってしまう。その指示は本当に必要？ 曖昧なまま仕事をすすめてしまう。的確な質問ができている？ 納期に遅れてしまう。「明日が締切」は「明日の何時」？ まとめ なんとなくデザインをしてしまう。その色・飾りを使う理由は？ 「その飾り罫、どう

第11回 Webディレクターを悩ませるデザインイメージ共有のためのテクニック - 思考するWebディレクション 新規会員登録 ログイン管理 Twitter facebook はてなブックマーク RSS 2024.4.21 SUN

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

2014.10.15 こんにちは！ 最近ササッキーと呼んでいただけるので、喜んでこの名前で記事書いていきます(｡･ω･｡)ゞ 本日は、 に感化され、これのデザイナーバージョンを公開しちゃおう！と思い立った次第です。 デザイナーがトップデザインする前にすべきこと、またその理由を4ステップで紹介しています。 前提として、ユニオンネットではディレクターさんに打ち合わせ～サイトマップ＆構成＆ワイヤーフレームを作成して頂いております。 よってその確認が最初のお仕事になります。 私の場合ですが、 の流れでトップデザインを制作しています。 目次 サイトマップの確認 ワイヤーフレームの確認 ディレクターさんとの打ち合わせ 参考サイトによるイメージ固め 手書きラフ デザインに落とし込み デザインのご質問お受けします 1.サイトマップの確認 まずは、サイトマップの確認をします。 どんなコンテンツがあるの？注力

2019年6月4日 Webデザイン, ダウンロード, フォント 女性Webデザイナーにとっては「かわいいと言えばこんな感じ！」という基本的な概念が自然と身についているものの、男性デザイナーにとってはなかなか難しい女性テイストのデザイン。でも大丈夫！今回紹介する無料素材やフォント・配色例を組み合わせれば、きっと女子力の高いかわいいデザインができあがるはずです！紹介する素材はすべて商用利用OK！参考になるデザインのWebサイトもいくつか紹介します！（あ、ちなみによく誤解されますが、私、Webクリエイターボックスの中の人は女ですw） ↑私が10年以上利用している会計ソフト！ 目次 無料フォント 無料アイコン・イラスト素材 無料の背景パターン素材 「かわいい」を実現する配色例 かわいい系デザインのWebサイト実例 無料フォント 曲線をうまく使うと女性らしいデザインに仕上がります。そこで、使用するフ

前回は、女性向けWebサイトデザインにおける「配色」のバリエーションについてご紹介しました。今回は、見出し等における細部の「装飾」に絞っていくつかのパターンをご紹介しようと思います。 手書き、アナログ風 女性向け（に限らないですが）、手書き風の文字やかすれた線を用いたアナログ的アプローチは、柔らかい雰囲気を出すオーソドックスな手法の一つです。 かすれた線 出典：サロンドパルール 出典：LEWE market かすれた感じの見出しや囲みの線で、アナログ感を表現。普通の直線を消しゴムツールで適当に削るだけでもできてしまうので、比較的難易度も低いです。また、フォントはゴシック体よりも、線幅が不均等な明朝系の方が馴染みやすいですね。 にじんだボタン 出典：フェリシモ 500色の色えんぴつ 出典：やさい あまうま ル・クルーゼ エッジが少しにじんだようなデザインのボタン。ボタンは必然的に目立つような

これまでにランディングページの制作についていくつか記事を書いてきましたが、 今回は、WEBサイトデザインとの違いという観点から考えてみたいと思います。 まず、WEBサイトとランディングページの違いを考える前に、この記事で指すWEBサイトについて大まかにですが、定義しておきたいと思います。 WEBサイトにも種類がたくさんがありますが、この記事では「ページ数が複数にわたるサイト」をWEBサイトとしておきます。 ※たとえば、企業のオフィシャルサイト、商品サイト、ブランドサイト、採用サイト、キャンペーンサイトなどの「ページもの」のサイトです。 では、それぞれのデザインの違いを考えるにあたって、 WEBサイトとランディングページのそもそもの役割について整理したいと思います。 WEBサイトとランディングページの役割 【WEBサイト】→ ページが複数 ・複数のページに遷移してもらいたい ・情報の網羅性が

もくじ ゲームサイトのデザインいろいろ ゲームサイトに特化したギャラリーサイト 「ゲーム」タグがあるギャラリーサイト ゲームのデザインをまとめた記事 ゲーム関連のアイコン ゲーム関連デザインのためのチュートリアル ゲームサイトのデザインいろいろ まずゲームサイトのデザインとはどんなものがあるのでしょうか？本当に様々ですが、中でも雰囲気や見せ方がそれぞれ異なるサイトを4つピックアップしてご紹介します！ ジョジョの奇妙な冒険 オールスターバトル バァーンッ！！まずはFlashバリバリ！のジョジョのゲームサイト。かっこいいしキャラを大きく打ち出しているのでインパクト抜群です！なんかもう、色んなとこホバーすると色んなものが動きます。これぞゲームのサイト！ってくらい仕掛けがたくさんです。文字で効果音が出たりするところが漫画っぽくもありますね。 トゥームレイダー 黒を背景にしていてシリアスな雰囲気や「

この記事は2015年10月23日の記事を再編集しています。 個人や企業がインターネット上でホームページを開設するのは、多くの場合、ユーザーからのアクション、つまりお問い合わせや資料請求、会員登録や販売経路を増やすことを目的としています。 そのためには、製品やサービスの優れた点をただ訴えるだけではなく、興味を持ってアクセスしてくれたユーザーに実際に行動に移してもらえるように、ストーリー性のあるランディングページが必要であると言われています。 自社製品に興味を持ってくれたユーザーのほとんどは、その製品やサービスが本当に自分の求めているものなのか疑いの気持ちを抱いています。 その疑いや心配を取り除くためにどのようなコンテンツが適切でしょうか。 今回は、ストーリー性のあるランディングページ制作のためのフレームワークをご紹介します。 ストーリー性のあるランディングページ制作のためのフレームワーク4選

ページのレイアウトをする時に全てが同じ大きさ・形・色だと、それは非常に退屈なデザインになってしまいます。要素を整理し、階層をつくり、重要な箇所にフォーカスがあたるようにするにはコントラストを効果的に使うことです。 レイアウトにビジュアルの興味を加え、デザインを生き生きとさせるコントラストの使い方を紹介します。 色の値(value)とはカラーの明るさや暗さをあらわす用語で、ピュアブラックとピュアホワイトに最もコントラストがあります。だからといって高いコントラストのデザインをつくるために、白黒のカラーパレットにこだわる必要はありません。簡単な方法の一つは、そのカラーからより明るいカラーと暗いカラーをつくり、コントラストを加え、あなたのデザインの特定の場所を目立たせることができます。 シンプルな例として、下記のような暗い背景に明るいテキストは効果的にコントラストをつくっています。背景が写真で、テ

最近、レスポンシブウェブデザインのサイトも増えてきましたね。このブログもレスポンシブ対応していて、色んなデバイスで閲覧できるようになっています。 ただ、制作会社のディレクターとしては、作ったレスポンシブのページをデバイス確認するのが非常に面倒なのです。 PCのウェブブラウザのウインドウサイズを伸び縮みさせてもいいのですが、それでは "どのデバイスで、どんな風に見えているか" が分からない。サイズ感が掴みにくいのです。 かと言って、検証機を５台も６台も並べて確認するのは非常に時間がかかってしまいます。 そこで私が利用しているのが「Responsive Checker」というウェブサービス。 URLを入力するだけで、擬似的に様々なデバイスでサイトを確認できます。また、任意のサイズに変更することもできるので、使い勝手も良い。オススメのウェブサービスです。 レスポンシブなサイトを一発確認 冒頭でお