先日のUnity道場の講演の一つ、「ゲーム開発者のためのタイポグラフィ講座」が割と良かったので、こちらにも書いておきます。 スライド タイポグラフィ 内容 同じイベントの他のスライド スライド ゲーム開発者のためのタイポグラフィ講座 from UnityTechnologiesJapan www.slideshare.net タイポグラフィ Wikipediaによると、以下の内容のようです。 タイポグラフィ（英: typography）は、活字（あるいは一定の文字の形状を複製し反復使用して印刷するための媒体）を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸である。 内容 内容にはスライドにあるとおりUnityの事は一切かかれていなくて、だいたいレイアウトやフォント（ポスター向け、ゲーム向け）の選び方についてです。 ポスターと言えども、最近は画面全体をレイアウトするよ

今の作業フローをもう少し良くしたい、と考えているデザイナーの方は多いのではないでしょうか。 日々のデザイン作業を"より快適に" "効率良く"するためには、デザインリソースを確認しておくことが重要です。 しかし、たくさんのツールやサービスがあり、実際問題どれを選んだらいいかわからなかったり……そもそも調べるのが面倒という方も決して少なくないはずです。 そこで今回は、数ある中からオススメしたいデザインリソースをピックアップしてご紹介します。 気になるものがあれば、今すぐ活用してみてはいかがでしょうか。 ※素材数などは2016年12月21日時点での情報です。今後変更となる可能性がありますのでご了承ください。 画像・動画素材関連 1. freepik http://www.freepik.com/ ベクター、PSD、アイコンと、様々な形式でデータが用意されている、便利な素材がたっぷり揃った素材サイ

TL;DR どうすれば初心者でも「分かりやすく見栄えのするレイアウト」を作ることが出来るのか。余白の使い方や知識、さまざまなレイアウトの例をご紹介させていただきます。闇雲な配置にならないように、レイアウトを組む前に読んでおきたいこと。今回は Web デザインのセンスを上げるために、イラストや構図から学べる知識をまとめました。 レイアウトの基本知識 １．分割、対称、軸 何もない空間に要素を配置・構成していくのがレイアウト。こちらは四等分割や軸を使ったレイアウトのパターンをまとめてあるサイトです。美しく配置するために見ておきたいレイアウトパターン。 レイアウトのパターン | イディア：情報デザインと情報アーキテクチャ Photoshop の機能拡張はこちら。 黄金比・黄金螺旋・黄金三角形などをページのレイアウトや写真の構図にあてがう Photoshop の機能拡張 | コリス ２．イラストから

さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った

ちょっとでもデザインの経験がある方なら一度は素材を探したことがあるかと思いますが、思ったより時間がかかってしまったことはないでしょうか。イメージしている素材が見つからない、そもそも、どんな素材を使ったらいいかがピンと来ないこともあるでしょう。 素材探しに悩んだときには、様々な素材に目を通してみると気になるものが見つかったり、新しいアイデアが生まれるものです。そこで今回は、チェックしておきたい最新のベクター素材をたっぷり60個ご紹介します。 素材探しで悩んでいる方は、一度目を通してみてはいかがでしょうか。 高品質な無料ベクター素材60選 1.Ice lolly - Free vector illustration http://ilovecolours.net/vector-illustrations/ice-cream-ice-lolly-vector-illustration/ 爽やかな

はじめまして。デジタルを軸にしたクリエイティブ・エージェンシーPARK Inc.のアートディレクターの佐々木智也（@tomosasaki）と申します。 昨今、ロゴを取り巻く環境は大きく変わりつつあります。日々誕生するスマートフォンアプリやWEBサービスの台頭によって、ロゴをつくる機会は確実に増えてきています。 特にWEBデザイナーの方は、WEBサイトやアプリのUIデザインの延長上でロゴをつくることになり、戸惑うことも少なくないのではないでしょうか？ 今日は、ロゴのデザインに強みや専門性をもっているデザイナーがどのようにロゴをつくっているかを紹介していきます。これでもう、ロゴデザインを恐れることはない、かもしれません。 ロゴデザインにおける大切なポイントをおさえよう なぜロゴが必要なのか？ まずはそこから考えてみましょう。 企業や商品をはじめ、アプリやサービスには、かならず強みや他と違う魅力

こんにちは！ 新米デザイナーのんちゃんです。 私は以前書いた記事でもお伝えしたように、インターンとして学生の頃からさまざまな企業でお仕事をさせていただきましたが、ほとんどが営業職。 しかし、初めてイラストレーターに触れた2013年の春のあの感動がどうしても忘れられず、このたび思い切ってLIGへグラフィックデザイナーとして転職しました。 そして、アイキャッチ画像やバナーなどLIGブログにまつわるクリエイティブの制作をさせてもらい、制作したアイキャッチ画像はもう100個を超えました。 右も左もわからない中、なんとか日々奮闘していますので、今回はわたしのような新米のデザイナーさんや未経験からデザイナーを志している方へ向けて、わたしがどのように1つのアイキャッチを作っているのかを赤裸々に公開し、一緒に頑張っていけたらなと思います。もしベテランデザイナーの方もご覧になっていただけるのであれば、温かい

デザインをするうえで、使用する機会の多いパターン素材。例えば、背景デザインをガラッと変えたいとき、すぐにイメージチェンジをしたいときに重宝します。 今回は、最新のデザインから、定番の柄、季節にぴったりな素材まで60種類ご紹介します。 ストックとしてダウンロードしておくだけで、いざというときに使えて便利ですので、気になるものがあればダウンロードしてみてください。 無料パターン素材60選 1.gray circular seamless pattern http://www.freepik.com/free-vector/gray-circular-seamless-pattern_845845.htm 円を一面に配置したシームレスなパターン素材です。 2.Watercolor floral decoration pattern http://www.freepik.com/free-vect

2013年12月25日 インスピレーション, 名刺 みなさんはどんな名刺をお持ちですか？またはどんな名刺に目を奪われますか？今働いている会社の名刺ではなく、個人の名刺を作ってみたくないですか？どうせ持つならインパクトのあるものがいいですよね！最初の印象をグッとよくする名刺の作り方がWeb Designer Depotで紹介されていたので意訳してみます！ ↑私が10年以上利用している会計ソフト！ Webデザイナー・デベロッパーとして、私たちは紙媒体を利用したマーケティングを見落としがちです。しかし、会議などクライアントと面と向かって会う場合や今後一諸にビジネスをするかもしれない誰かと出会ったとき、印刷物は非常に役に立ちます。名刺を持つことはあなた自身をオフラインの世界で宣伝するとてもいい方法です。 もちろんWebデザインは創造的な分野であるので、名刺にポートフォリオのような、自分のスキルを見

広告、デザインにおいて季節感を演出することは重要です。今の季節に合わせデザインに春を感じさせるものを取り入れたいところですが、あまり手のこんだものを作る余裕がないという担当者の方もいらっしゃるのではないでしょうか。 そんな時にオススメなのがフォトショップ用パターンです。パターンとは塗りつぶしやレイヤースタイルに適用できる繋ぎ目のないデザイン素材で、ダウンロードしてフォトショップに取り込むだけでいつもの壁紙や背景デザインを簡単にイメージチェンジすることが出来ます。 特に海外サイトを中心に多くのデザインパターンが公開されており、様々なデザイン活動において大変重宝します。今回は、無料で使える春向きパターン素材の中でも特にクオリティの高い50個をご紹介します。これ一つで一気に春らしさを演出出来ますので、是非取り入れてみてください。 1.Spring Has Sprung http://www.de

photoshopでデザインするにあたり大変便利なのがブラシツール。自分では上手く描けない、というデザインもブラシを使えば可能にしてくれます。 今回はそのまま使うだけでお洒落なデザインが出来る、フリーのphotoshopブラシ80個をご紹介します。 デザイン不要のPhotoshop用ブラシ一覧 1.21 sets of free retro brushes for photoshop http://absolutbeginner.deviantart.com/art/retro-images-1212567 レトロな雰囲気の男性イラストが描かれたブラシです。 2.Astrodings - .Abr http://ihavethedreamersdise.deviantart.com/art/Astrodings-Abr-472459435 月や太陽のモチーフをラフに描いたクールなブラシです

デザインをしているときに悩んでしまいがちで、全体のイメージを決める重要な要素のひとつ、フォント選び。手持ちのフォントコレクションを定期的にアップデートして、クリエイティブな作品をつくってみましょう。 今回は、最近公開された無料ダウンロードできるフリーフォント素材をまとめてご紹介します。太さに応じて豊富なウエイトが用意された書体から、今年のトレンドでもある手書き、ブラシスタイルの他に、人気の高い美しい筆記体デザインなどが揃っています。 詳細は以下から。 デザイナーが持っていたい、すごいフリーフォント素材まとめ あさご本丸ゴシック 伝統的な雰囲気でありながらも、クルクルとしたループ状の線が個性的でモダンさを感じるエレガントな書体だそうです。 ※　個人利用可能 Margurite 流れるように美しい筆記体スタイルで、リガチャ合字なども豊富に用意された、プロユースのデザインフォント。 ※　個人利用

テクスチャ素材はデザイン活動で役立つ素材の一つで、デジカメで色々な素材を撮影したものやユニーク質感、模様をグラフィックソフトを使って表現したものがあり、WebデザインからDTPまであらゆる場面で使われています。 そのまま背景に取り入れる以外に、既に出来上がっているデザインに重ねて使うこともでき、制作物をさらに魅力的に仕上げてくれるアイテムです。そこで今回は、持っておくと便利な無料テクスチャをまとめてご紹介します。 どれも無料でダウンロードできますので、好みのもの見つけてくださいね。 トレンドから定番まで！無料テクスチャ素材60選 1.12 Paper Textures http://graphicburger.com/12-paper-textures/ 12種類の様々な紙を収録したペーパーテクスチャのセットです。ちょっとだけ質感を加えたいときにぴったりです。 2.10 Light Tex

デザインをおこなう上でセンスは必要な要素ではありますが、デザインのルール、理論に沿ったものにするということが重要です。プロはこれらルールを理解した上でデザインを作成しています。 ルールを守ってデザインをおこなえば誰でもセンスのいいデザインに近づけることができます。逆に、最低限のルールを無視してデザインしたものはいくら工夫を凝らしても素人っぽさが抜けない、ということになります。 ビジュアルデザインを行う上で、最低限知っておきたいものとして「貴金属比」というものがあります。「黄金比」という言葉を誰しも一度は耳にしたことがあるかと思いますが、これも貴金属比の一種です。貴金属比は古くから人間が美しいと感じる比率として用いられており、デザインに取り入れればバランス良く、整った見た目に仕上がります。 今回は、黄金比を初めとした貴金属比5つと、貴金属比をデザインに取り入れる際に便利なツールをご紹介します

ferret編集部：2015年8月6日に公開された記事を再編集しています。 バナーくらい短時間でできる！と意気込んだものの、思った以上に時間をとられることはありませんか？ 簡単な作業だと思っていたはずが、何回も似たような作業の繰り返しをしているとイライラしてきたり、モチベーションも保てずと負のサイクルへ陥ってしまいます。 そのような問題を解決するためには、バナー作成のための各工程を分解して、何にどれくらい時間がかかっているのかを知り、効率よく作成する方法を知る必要があります。 今回は、30分でバナーを作るための方法として、作業工程と効率化が図れるポイントを順序立てて解説します。 広告バナー制作の全体像 短時間でバナーを作成する前提条件 制作全てに言えることですが、最短距離でゴールまで走るというのが一番の理想型です。バナー制作においても同様です。そのためにも、ゴールまでの筋道を立てる必要があ

近年、頻繁に耳にする「マテリアルデザイン」。 マテリアルデザインの醍醐味はユーザーにとっての使い心地度、利用しやすさ、ストレスを感じないデザインを実現できることです。 しかし、実際、マテリアルデザインを作成すると迷う部分も多く、特に配色パターンに悩まされる方も多いのではないでしょうか。 今回は、注目を集めているマテリアルデザイン用の配色を簡単に作れるサイトをご紹介します。 マテリアルデザインの配色はある程度決まっている Googleが提供している「マテリアルデザイン」は、基本的に使用可能な色が指定されています。 立体系のデザインが特徴的で、ドロップシャドウや彩度の調整などの細かなルールも存在します。 配色作成サービス 1.Material Design http://www.materialui.co/colors Googleが考案した「マテリアルデザイン」のガイドラインがあり、その配色