デザイン業務においてよく依頼される機会が多いものといえばバナーです。サイズが小さい分、簡単だと思われがちですが、実際には意外に難しく奥が深い存在です。 なぜなら、限られたスペースの中だけでターゲットの目にとまらなければいけないからです。それ故に悩んでしまって制作に時間がかかることも少なくありません。特に悩みの種になるのがバリエーションで、日頃からバナーを作る機会が多い方はついつい似たようなデザインになってしまいがちです。 今回は、バナーデザインを紹介しているギャラリーサイトをまとめてご紹介します。眺めるだけでも、制作のアイデアを得ることができます。バリエーション不足にお悩みの方、デザインのコツが掴めない方はぜひ参考にしてみてはいかがでしょうか。 バナーデザインを多数集めたギャラリーサイト13選 1.バナーデザインアーカイブ バナーデザインアーカイブ Pinterest風の見た目が特徴的で、

最近ではスマホアプリ、Webサービスの増加でロゴ作成の機会も増えてきています。 ニーズも高く重要な要素であるロゴですが、アイデアが浮かばない、どんな手順で作ったらいいかわからないという方も多くいらっしゃいます。 また、実際に作ってみるとどうしてもありがちなロゴになってしまうことも少なくありません。 今回は、ロゴデザインの際に参考にしたいホームページをギャラリー系、参考記事の2つのジャンルから19個ご紹介します。ロゴ作成で悩んでいる、という方は是非デザインのヒントにしてみてください。 ロゴデザインのアイデアにつながるギャラリーサイト 1.logofaves http://logofaves.com/ 大きめのサムネイルがとても見やすいギャラリーサイトです。 1つ1つのロゴが5段階で評価されており、最新、人気順、ランダム、最近お気に入り登録された順で並び替えることができます。 また、ロゴの下に

読み込み速度を高速化することは、戦略上非常に重要なことです。 ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。 UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。 さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40％の人が読み込みを諦めて離脱してしまうことが分かっています。 SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。 もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。 ferretでは、これまでSVGを使った画像の最適化

数多くあるフォントのなかでも、筆記体フォントは特に人気のスタイルです。取り入れるだけでオシャレな印象になる筆記体フォントをよく使われている方も多いのではないでしょうか。単に筆記体フォントといっても、リアルな手書き風のものから、そのままロゴとして使えそうなものまで幅広いデザインのものが存在します。 今回は、豊富な英語のフリーフォントの中から、無料でデザインに使いやすい筆記体フォントをまとめて紹介します。 ▼ノンデザイナーでも使える！デザイン簡単ツール みんなが使えて導入しやすい！デザイン・動画・サイト制作の【簡単ツール特集】 専門職でなくても使いこなせるデザイン制作関連のツールを特集。弊社のマーケター・営業メンバーや総務・人事担当も実際に使えているツールを、1カテゴリにつき1つピックアップしてご紹介します。 英語の筆記体フリーフォント AggstockGravid AggstockGravi

Webサイトやページの移転に必要なリダイレクト処理は、Web担当者にとって必要不可欠な知識です。 Webサイト制作に関わるデザイナーやエンジニアが、SEOに適切なリダイレクト方法を理解していないケースがあるためです。 特に、URLの変更を伴うサイト移転をするケースでは、Googleが推奨する正しいリダイレクト処理をしないと、移転後のWebサイトの検索順位に大きなマイナスの影響を与えます。 リダイレクトの種類には、.htaccessを使用するサーバー転送や、canonical属性、meta refresh、JavaScriptなどを使用した転送方法がありますが、ケースに応じてどのリダイレクト方法を選択するのかを把握していることが重要です。 URLの変更を伴うサイト移転には301リダイレクト ドメインが変わるURLの変更を伴うサイト移転には、301リダイレクト（永久転送）を使用します。Sear

和風テイストのデザインをしたいと思った時、意外と見つからないという経験がないでしょうか。 無料素材といえば海外サイトで多く配布されていますが、正統派な和風素材はなかなか見つけにくいです。 今回は、和風のパターン素材を60個まとめてご紹介します。 きっとこれだけあれば和風のデザインに困りませんので、ぜひデザイン作業にご活用ください。 無料で使える和風パターン素材 1.Japanese style pattern http://gimei.deviantart.com/art/Japanese-style-pattern-102424198 日本ならではの和柄19種と、シンプルな和柄20種をセットにしたボリュームたっぷりなパターン素材セットです。 2.Origami paper texture pack http://andrea-koupal.deviantart.com/art/Origa

フォントがデザインに与える影響は大きく、非常に重要な要素の一つです。 同じデザインであってもフォントが違うというだけで全く印象が変わってしまいます。 Photoshopやillustratorにはデフォルトでフォントが初めから収録してありますが、どうしてもしっくりこない場合があり、目的に応じて使い分ける必要があります。 今回は、ビンテージ風デザインのフォントを50個ピックアップしてご紹介します。 レトロな雰囲気にぴったり合うオシャレなものが揃っていますので、気になるものがあればぜひデザインに取り入れてみてください。 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまと

プロダクトデザインを行う上でよく使うモックアップは、Web制作やその他デザインの場面、ビジネスの様々なシーンで活用することができます。 例えば、Web制作の場面では、ホームページのデザインにそのまま使うことが可能です。ビジネスの現場では、プレゼン資料で完成予定のデザインを見せたい時に使えます。 様々なタイプの素材があり、しかも無料で手に入るものが豊富にありますので、活用しない手はありません。 今回は、そんな便利なPSD素材の中から無料のものだけをピックアップしてご紹介します。 ビジネスに、デザインに、ぜひ活用してみてください。 ビジネスからデザインまで、幅広いシーンで重宝する無料PSD素材まとめ 1. 3 Elegant Macbook Pro MockUps http://graphicburger.com/3-elegant-macbook-pro-mockups/ 異なる3シーンを収

SassやLESSなどのCSSプリプロセッサーを使わずにCSSを書いているひとは未だに多いのではないでしょうか。 日常の業務でCSSを記述していると、どうしてもCSSはセレクタやプロパティの繰り返しが多くなってしまい、冗長になりがちです。 CSSだけでなく、あらゆる要素には軽量化が求められます。 ページ速度が遅くなれば、それだけ直帰率が多くなり、また検索エンジンもそのことをマイナスに評価して、結果的にページ全体のアクセス減につながってしまいます。 最近では、idセレクターやHTMLタグのセレクターを取り除く動きもあります。 効率よくCSSを書いていくには、どのようにして書いていけばいいのでしょうか。 今回は、コーダーが押さえるべきCSSコーディング5つのポイントをご紹介します。 シンプルに書くことを意識すれば、ファイル容量が軽量化するだけでなく、だれもが読みやすいファイルになります。 具体

ホームページ、広告をデザインする際に仮のデザインでもイメージを作っておきたいことがあります。そんな時に大変便利なのがPSDファイルです。 PSDファイルの大半は、レイヤーが分かれた状態で保存されているため、編集・カスタマイズがしやすいのが特徴です。また、デザインテクニックを学ぶためにも利用できます。 最近では、フリーでも優れたデザインのものが多く、モックアップからアイコンまで種類も豊富です。 今回は、実際にデザインする際に使いやすいものをメインに無料のPSDファイルを80個に厳選してご紹介します。デザインアイデアの参考にもなりますので、是非活用してみてください。 デザインの参考にもできる無料のPSDファイル 1.フラットなデザインのユーザー·インタフェース·テンプレート http://jp.freepik.com/free-psd/user-interface-template-in-fl

イノベーションというのは、大抵の場合、従来持っていた既成概念を壊す形でやってきます。 例えば、仮想通貨の場合、実体のある媒体としての通貨を持ったり、発行元の中央政府がなければならないという既成概念を崩し、Amazon Goや韓国のセブンイレブンのように現金を持たなくともスマホや身体だけで決済を行うのは、有人のレジに並ばなければならないという固定観念を覆すものです。 それでは、UX/UIの世界では、どうでしょうか？ 残念ながら、iPhone 5がリリースして以降からは、モバイルアプリやモバイルWebデザインに関しては、そこまで大きなイノベーションは実際のところ起こってはいなかったのではないでしょうか。 パララックスエフェクトやWebフォントといった当時であれば革新的な技術が、現代風にアレンジされて何度も登場しているに過ぎない、といっても過言ではないでしょう。 しかし、UX/UIの既成概念を崩

あらゆるシーンで使用頻度が高いものといえば手書き風フォントです手書き風フォントを使用すると、どこか親しみやすい印象を与えることができます。 特に子供向け、女性向けのデザインにおいては大変重宝しますのでデザインの機会がある方は沢山持っておいて損はありません。 今回は数ある手書き風フォントの中から、おすすめな英語の手書き風フリーフォントを紹介いたします。 いずれも優れたデザインですが全て無料で使えるフォントです。気になるものがあればぜひダウンロードして使ってみてください。 ▼ Webディレクター・デザイナーにお役立ち 手書き風フリーフォント48選 1.Julies https://www.dafont.com/julies.font 小さな子供が書いたような雰囲気の手書き風フォントです。 ハート、星、虫といった可愛らしいモチーフも収録しています。 文字によってはハートをデザインに取り入れていて

この記事は2016年2月18日の記事を更新しています。 デザインをする際、背景などにパターン素材を使う方は多くいらっしゃいます。 しかし、せっかく作ったのに継ぎ目が見えてしまって残念な仕上がりになってしまったり、好きなパターン素材を見つけていざ使ってみると合わない、という経験が一度はあるのではないでしょうか。 実は、パターン素材は非常に簡単に作れますので、コツさえ掴めば継ぎ目のない綺麗なパターン素材を自作することも可能です。 今回は、Photoshopで継ぎ目のないシームレスなパターン素材を作る方法をご紹介します。 定番のドット柄からテクスチャまで一通り紹介しておりますので、今までパターン素材で悩んでいたという方はこれを機に自分で作ってみてはいかがでしょうか。 継ぎ目のないシームレスなパターン素材の作り方まとめ 1.ドットのパターン素材の作り方 まずは定番のドットパターンの作り方からご紹介

Appleのデザインは、シンプルかつ非常に洗練されているので、多くのWebデザイナーやアプリデザイナーがAppleのデザインを手本としたり、参考にしたりしています。 実際に、Appleのデザインを信奉する人々は20年以上も前からいましたが、コンピュータの形状や色などのいわゆる*「外側のデザイン」に加えて、現在では画面の中身である「内側のデザイン」を模倣したり研究したりするケースも多いのではないでしょうか。 特にiOSに関しては「iOS7」*からデザインを大きく変えており、App Storeで配布されているアプリケーションに関しても、できるだけ「iOS」の世界観を崩さずに(もしくはできるだけ世界観に適用するように)シンプルにデザインされているアプリがたくさんあります。 ところで、世界で最も使われているOSである「iOS」には、「ヒューマンインターフェイスガイドライン」(Human Inter

ブログを始めたりホームページを自作したりするために勉強しはじめると、さらにデザインを凝ったものにしたくなります。 また、ある程度カスタマイズが進めば、表示速度をもっと早くしたり、より短いコードでコーディングしたりしたくなります。 そこで必ず話題に上るのが、CSSです。 もちろん、LessやSassのようなCSSプリプロセッサー(関数を使ったりしてプログラミングコードのように書くことができるCSS)が誕生したことで、より複雑なデザインをできるだけ少ないコードで書くことができるようになりました。 しかし、フロントエンドエンジニアとしてレベルアップするためには、どのように書けばレイアウトが改善されたり表示速度が速くなるのかをしっかりと理解しておいたほうがよいでしょう。 今回は、Webデザイン初心者がランクアップするためのCSSのコツをご紹介します。 これから紹介する、多くの初心者を泣かせたCSS

スマートフォンアプリを開発するときに、iOSであればObjective-CやSwift、AndroidであればJavaを別々に使えるようにならなければいけない、と思いがちです。 しかしながら、iOSとAndroidの両方に対応したスマホアプリを作ろうとすると、全ての言語を習得するのは至難の技です。 今回は、JavaScriptとHTML5を使ったスマホアプリの開発方法をご紹介します。 これらの言語はすでにホームページを作成したことがある人であれば基本的な知識を押さえているので、スマホアプリを開発するときにもそれほど学習コストがかかりません。 必要最低限の知識さえ押さえておけば、あとは各プラットフォームのルールにしたがって実装を行っていけばいいのです。 それでは、プラットフォームや開発の流れを紹介していきます。 JavaScriptやHTML5でスマホアプリが作れるプラットフォーム まず、i

ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけCSSは、HTMLやJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。 今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。 スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。 保存しておくと便利なCSSスニペット 1. CSSリセット さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させるCSSリセットと呼ばれるテクニックがあります。 CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とm

商品の魅力をアピールするのに、あなたの会社ではどのような手法を用いていますか？ ホームページで展開したり、チラシを配布したりと創意工夫をしながら、顧客に商品を知ってもらうためのプロモーションを行っているでしょう。 プロモーションを行うなかでも「この商品の良さは実際に体験してこそわかる」と感じることはありませんか？ そんな時に使いたいのが体験型マーケティングの手法です。 試飲イベントやサンプリングといった体験型マーケティングでは、実際に触れてもらうことで商品の良さを顧客自身が実感することができます。 今回は「体験」を利用したマーケティングの手法をご紹介します。 このサービスの魅力を顧客に直接伝えたいという思いのある方は必読です。 「体験」をマーケティングに活用するメリット 実際に商品やサービスに触れてもらうことで、魅力を感じてもらう販売促進方法を体験型マーケティングといい、食品・酒造メーカー

フォントは、グラフィックデザインにおいて非常に重要な役割を担います。 フォントを少し変えるだけで、雰囲気が180度変わることも珍しくありません。 あらゆるデザインにすぐに対応できるよう、フォントのバリエーションは多ければ多いに越したことはありません。 無料フォントをストックしておけば、どのような依頼がきても対応しやすくなります。 特に日本語のフォントは重宝するのではないでしょうか。 今回は、ユニークな日本語のフリーフォントを10個厳選してご紹介します。 広告デザインなどの媒体で使うイメージが湧くように、フォントの良さが出てくる画像と合わせてみました。 ユニークな日本語フリーフォント10選 1. 廻想体 http://moji-waku.com/kaiso/ 廻想体は、現代っぽさを感じさせる縦長の字体が特徴のフォントです。 パッケージや広告のタイトルなどに利用できそうです。 全角のひらかな・

メルマガを送信する際、テキストのみで送信している方も多いのではないでしょうか。 スマートフォンの普及とに伴い、メールの本文内で画像をしようhしたり装飾を施したりなどが可能になりました。 訴求内容によっても異なりますが、特にネットショップなど写真や画像がメインとなる場合には、HTMLメルマガは訴求力をあげる有効な手段となります。 今回は、HTMLでメルマガを作成する際に最低限知っておきたい、タグと装飾14選をご紹介します。 また、HTMLメールを作成する際に必要な3つのステップも合わせてご紹介しています。 どちらも基本的な知識ばかりですが、メルマガ作成にあたり必要不可欠な知識となりますので押さえておきましょう。 このニュースを読んだあなたにオススメ メルマガを配信する前にこれだけは知っておこう！テキストメールとHTMLメールの違いを解説 デザインいらず！誰でも簡単にオシャレなHTMLメルマガ