DESIGN

レイアウトの4原則2/4~整列~

デザインを構成する要素のレイアウトにおいて大切なことのひとつに、「配置するものはすべて揃える」という原則があります。文章においても文頭を揃えるということがあるように、デザインにおいても、タイトルや本文...
DESIGN

レイアウトの4原則1/4~近接~

デザインをするうえで基本となる“レイアウト”について、まずは「グループ化(接近効果)」について見ていきましょう。消費者に正確に情報を伝えるためには、企業側が伝えたい情報(画像や文言)をきちんと整理した...
DESIGN

その隙間を見逃すな!文字組を怠るべからず。

デザインをするにあたり、必ず意識する必要があるのが「文字組(もじぐみ)」です。ビジュアル的なデザイン性、マッチするフォント選びなども重要な項目ではありますが、その基礎として文字組がきちんと出来ていると...
SERVICE

PDFをすっきり圧縮してくれる無料オンラインサービス3選

日頃Gmailを利用することが多くデータ確認のやり取りをする際に、容量の制限でそのまま添付が出来ないことが頻繁にあります。Gmailでは25MBを超えるようなファイルを添付しようとすると、「ドライブで...
CSS

Google日本語フォントが試験的に公開!使い方を解説!

昨年、Googleより無料で使える日本語フォントが9種類公開されました。アルファベットよりも文字数が多く、データの問題的になかなか日本語で使えるフォントがないのが現状ですが、試験的ではありますが一般ユ...
Illustrator

【Ai】筆で書いたような墨溜まりのつくりかた

日本語フォントには色々な筆文字がありますが、なんだかどれもお寿司屋さんのお品書きみたいな印象であまり使いやすいとは言えないなぁ~と感じているのは、私だけではないと思います。そこで、既存の明朝体やゴシッ...
Photoshop

【Ps】Photoshopでサクッと点線をつくる方法

Photoshopで罫線やシェイプなどを作成する際に、「点線」や「ドット線」などを利用したいときにサクッとできる方法をご紹介します。Illustratorなど簡単にできますが、Photoshopだと「...
DESIGN

JPG.GIF.PNG 画像形式の違いって何?

Webデザイナーにとっては日頃から馴染みのある「画像形式」ですが、営業さんやクライアントさんにとっては「画像形式って何?」って感じだと思います。おそらくデザイナーの方は、制作依頼のやり取りのなかで同じ...
Illustrator

【Ai】かすれたグランジ文字をつくる方法

メインキャッチなどをインパクトのあるイメージで配置したいときに、テキストがかすれた感じ(グランジ風)にする方法をご紹介します。細めのフォントよりも太めのフォントの方が、わかりやすく表現できると思います...
DESIGN

アイデアをカタチにしていくためのラフスケッチ

ここのところmacひとつで会議に出席し、キーボードを打つことが多くなってきているデザイナーも多いのではないでしょうか。新しい提案をテキストエディタで文章にしていても、ちょっとした図であったり、フローで...
Illustrator

【Ai】ファイルサイズについて~軽くしたいとき~

Illustratorのデザインデータってなんだかんだファイルサイズが大きいんですよね・・・。入稿する際などに「リンク」や「埋め込み」など、保存の仕方は違ってきますが、ちょっとでも容量を軽くしたいなぁ...
HTML

「Font Awesome」利用サンプル集

前回の記事、「Font Awesome」ウェブアイコンフォントの利用方法の続きとして、実際に「Font Awesome」を利用しながら、オプションとして指定できるサンプルを見ていきたいと思います。▼目...
jQuery

画面内に表示されたときに動きをつける「jquery.inview」

スクロールしていくと要素が順番に表示されたり、横からスライド表示されたりするWebサイトが見られるようになってきました。これは、画面内に指定した要素が表示されるタイミングでイベントを実行させるという処...
HTML

「Font Awesome」ウェブアイコンフォントの利用方法

一昔前は、ナビゲーションやリストマークなどに「シンボルマーク+テキスト」を表示したい場合、「png画像」を背景画像に指定するなどして対応することもありましたが、フラットデザインが流行してからは「Web...