スタッフ厳選おすすめ情報

デザイン

おすすめ情報

2017年3月24日

イラストレーター入門 最初に知ってると便利なツールの特性と操作方法

toolnotokuseitosousahouhou

初めに

仕事をする上でIllustratorを使うようになり、大抵のIllustrator作業は問題なく行えるようになりましたが、初めの頃はIllustratorを勉強しようとしても機能がいっぱいで「何から始めていいか分からない」ということがありました。そこでIllustratorについての基礎を段階を踏んで紹介していきたいと思います。今回は最初に知っておくべき基礎ツール編です。

紹介する基礎ツールは以下です。

 toolnotokuseitosousahouhou_01

①選択ツール
②ダイレクト選択ツール
③ペンツール
④文字ツール
⑤図形ツール
⑥回転・リフレクトツール

これを覚えて多くとIllustratorの基本操作は可能になります。
順を追って説明していきましょう。

選択ツール

図形やテキストなどを選択し移動・変形・複製などを行えるツールです。選択したいオボジェクトをクリックして選択し、クリックしたままドラッグさせると移動します。また選択時に表示されるバウンディングボックスの白い点をクリックしたままドラッグすることで変形します。

toolnotokuseitosousahouhou_03

選択ショートカットキー
【Shift】+ドラッグ複数→複数のオブジェクトを選択。一度選択したものをもう一度クリックすると選択解除になる。

移動ショートカットキー
【Shift】+ドラッグ→平行・垂直・斜め45度移動(移動させる方向で決まります)
【alt】+ドラッグ→複製

変形ショートカットキー
【Shift】+ドラッグ→端を起点に縦横固定比率で変形
【alt】+ドラッグ→中心を起点にドラッグする方向で変形
【Shift】+【alt】+ドラッグ→中心を起点に縦横固定比率で変形

 

 

ダイレクト選択ツール

アンカーポイントの編集

Illustratorの図形の要素は主にパスと呼ばれる線で構成されています。「アンカーポイント」と言う点を線で繋いだものが「セグメント」セグメントの曲線はアンカーポイントから伸びる「方向点」と「方向線」で決められます。ダイレクト選択ツールはそれらを選択・移動・変形することができるツールです。

toolnotokuseitosousahouhou_05

toolnotokuseitosousahouhou_06

選択ショートカットキー
【Shift】+ドラッグ複数→複数のアンカーポイントを選択。一度選択したものをもう一度クリックすると選択解除になる。

移動ショートカットキー
【Shift】+ドラッグ→平行・垂直・斜め45度移動(移動させる方向で決まります)
【alt】+ドラッグ→アンカーポイントの複製

ライブコーナー

ダイレクト選択ツールでオブジェクトを選択すると角に「コーナーポイント」が表示されます。これをダイレクト選択ツール(選択ツールでも可能)でドラッグ来ると図形の角を編集できます。角の形は角丸以外にすることも可能です。ダイレクト選択ツールを使用すると編集する角を選択することができますが選択ツールだとオブジェクトの全ての角に変形が適用されます。

toolnotokuseitosousahouhou_07

ペンツール

ペンツール

toolnotokuseitosousahouhou_09

ペンツールはパスを描写していくツールです。クリックするとアンカーポイントを設置でき、続けてクリックしていくとセグメントで繋がり図形を作ることができます。ドラッグをすることで方向線を含むアンカーポイントが出来、曲線も同時に描画出来ます。

アンカーポイントの追加

パス上でクリックすることで指定の位置にアンカーポイントを追加出来ます。複数の図形が重なる場合は、あらかじめアンカーポイントを増やすオブジェクトを選択し、選択パス上をクリックすることで他のオブジェクトに誤ってアンカーポイントが作られることがありません。

アンカーポイントの削除

アンカーポイント上でクリックすることで指定のアンカーポイントを削除削除出来ます。削除した際、次点のアンカーポイントにセグメントが繋がりますので図形を単純にしたい場合などに使用します。

アンカーポイントツール

アンカーポイントを切り替えるツールです。方向線が無いアンカーポイントをドラッグすると新規の方向線を追加できます。
また方向点をクリックすることで、角方向点の向きを変更することができます。なお方向線があるアンカーポイントをクリックすると、方向線を削除できます。

toolnotokuseitosousahouhou_11

文字ツール

文字や文章を入力するためのツールです。入力後も変更・削除などすることができます。

toolnotokuseitosousahouhou_13

文字ツール横書き縦書き

それぞれ横書き縦書きで文章を入力することができます。クリックした箇所にI ビームが表示されテキストを入力することができます。ドラックすると四角のテキストボックスが制作され、ボックスの範囲内にテキスト入力ができます。テキストボックスは生成された範囲内で文章が自動的に次の行にかわりますが、テキストボックスで入力していない場合は次の行に行きたい箇所で【Enter】を押さないと次の行に移行しません。

エリア内文字ツール

パスで制作された図形をツールでクリックするとその図形がテキストボックスになり、選択された図形内でのテキスト入力ができます。テキストボックスに変更されたあともパスで図形の編集が可能です。

パス上文字ツール

このツールでパスをタッチすると、円形や曲線などのパス上にテキスト入力が可能になります。またパス上でどの部分から文章が始まるのか指示もできます。また、エリア内文字ツールと同様、テキスト入力後にパスの編集もできます。

文字タッチツール

テキスト内の文字を選択し、個別に編集をすることができるツールです。文字タッチツールで文字をタッチすると文字が四角のボックスに囲まれて、各角と上部に一つと全部で5つのポイントが表示されます。左下がベースラインで、編集する際の基準点になります。それ以外のポイントはドラッグすることで文字の編集が可能です。右下は水平比率での編集になり、左上は垂直比率、右上は文字の大きさを編集できます。上部のポイントは回転編集ができます。ボックス内をクリックしてドラッグすると位置を移動させることができます。もちろん色などの編集も可能です。

toolnotokuseitosousahouhou_15

図形ツール

toolnotokuseitosousahouhou_17

パス上の図形を制作できるツールです。長方形・楕円・多角形などの図形を制作できます。ドラッグすることで図形を作成できます。またドラッグをせずにクリックだけすると各図形の数値入力ウィンドウが開きます。多角形ツールの場合は角の数入力も可能です。図形ツールで製作された図形もライブコーナーで角の編集が可能です。

toolnotokuseitosousahouhou_19

【Shift】+ドラッグ→縦横(もしくは各辺)同比率の図形作成
【alt】+ドラッグ→クリックした点を中心に図形作成。(多角形・スターツールを除く)
【Shift】+【alt】+ドラッグ→クリックした点を中心に縦横同比率で図形作成

 

 

回転・リフレクトツール

toolnotokuseitosousahouhou_21

選択したオブジェクトを回転・反転するツールです。編集するオブジェクトを選択した状態で回転・リフレクトツールに変更すると中心に回転・反転軸が設定されドラッグすることで回転・反転します。クリックで軸の位置を変更できます。また【alt】を押しながらクリックすると回転の数値入力や反転の方向指定ウィンドウが開きます。

toolnotokuseitosousahouhou_23

回転
【Shift】+ドラッグ→45度ごとの回転
【alt】+クリック→クリックした点を軸に回転
【alt】+ドラッグ→コピーして回転オブジェクトを作成

リフレクト
【Shift】+ドラッグ→45度ごとの反転
【alt】+クリック→クリックした点を軸に反転
【alt】+ドラッグ→コピーして反転オブジェクトを作成

最後に

以上を最初に知っておくとIllustratorを使っていく上で初めの段階につまずきが少ないかと思います。Illustratorなどのソフトは触って慣れることが第一だと思いますので、臆せず使っていきましょう!
またIllustratorやPhotoshopなどのadobe製品ソフトは定期的にバージョンアップし、新しい機能が追加され、どんどん便利になっていくので常にアップグレードしそういった情報も見逃さないように注意しましょう。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年2月26日

初心者向け Photoshopの便利な小技集

初心者向けPhotoshopの便利な小技集

私は主にデザインを担当しているのですが、
入社した当時は、Photoshopがほとんど使えませんでした。

お恥ずかしながら、Photoshopは写真を加工するためにしか
使ってこなかったですし、
WebデザインはIllustratorでしか
したことがありませんでした。

制作部ではWebデザインやディスプレイ広告は
Photoshopで作っているので、
悪戦苦闘しながらもすこしずつPhotoshopの操作を
覚えていきました。

この記事では、実際に私が「これは便利だな〜」と思った
Photoshopの小技やテクニックを
紹介していきたいと思います。

オリジナルのショートカットキーを登録する

Photoshopには作業効率を高めるための
ショートカットが豊富にありますが、
元々設定されているショートカットだけでは
少し物足りなかったり、よく使うコマンドなのに
右手をつかわないといけない場所に設定されていたりする
場合もあり、使いにくい部分もあります。

そこで、自分好みにショートカットキーを登録して、
作業効率をアップさせましょう。

ショートカットキー登録方法

ショートカットは次のやり方でカスタマイズできます。
1.「編集」→「キーボードショートカット…」で
メニューを開く
2.「新規セット」ボタンをクリックして
セットのコピーを作成するか、セットを選択して
変更する。 変更したいコマンドの
「ショートカット」を選択し、
キーを押してショートカットを割り当てる。
3.編集後、セットを保存する。

また、ショートカットの設定は
「.kysファイル」による受け渡しが出来ます。
ネットでは、使いやすいように設定された
「.kysファイル」が配布されていたりするので、
自分で一から考えるの面倒くさいな〜という人は
設定の手間すらもショートカット出来ます。

グラデーションの登録

みなさんはデザインでグラデーションをつくる際、
毎回、一からつくっていますか?

わたしは、グラデーションを一からつくるのが苦手なので
ネットで無料配布されている
グラデーションファイルを登録しています。

メリットとしては、作業時間を一気に短縮してくれる、
最適なカラーリングが可能という点があげられます。

グラデーションファイルの登録方法

1.まずグラデーションファイルをダウンロードします。
zipファイルなどで圧縮されている場合は、
解凍しておきましょう。
2.Photoshopを開き、メインメニューより「編集」→
「プリセットマネージャー」を選択。
3.「プリセットの種類」をスタイルとし、
「読み込み」ボタンをクリックします。
4.解凍しておいたレイヤースタイルを
保存しているフォルダを選択。

「プリセットマネージャー」は、グラデーションの他にも
スウォッチ・シェイプ・ブラシ・レイヤースタイルなども
同じ要領でインストールすることが出来ます。

複製したレイヤーに「〜〜のコピー」と表示させない方法

レイヤーを複製したときに
「〜〜 (元レイヤーの名前)のコピー」と表示されますよね。

「〜〜のコピー」をさらに複製すると
「〜〜のコピーのコピー」、さらに複製すると
「〜〜のコピーのコピーのコピー」なんて風に、
レイヤー名がすごいことになってしまうこと、
ありませんか?

あとから名前を変える予定のレイヤーなら
問題ないですが、変えないレイヤーの場合は、
なんとなく整理された名前にしておきたいですよね。
1分ほどの設定で、「〜〜のコピー」と
表示させない方法があるのでご紹介します。

1.レイヤーパネルの右上の部分をクリック
2.パネルオプションを選ぶ
3.『コピーしたレイヤーとグループに
「コピー」を追加』のチェックを外す。

重なっているレイヤーから選択したいレイヤーを探し出す方法

レイヤー選択時に、
レイヤーが重なりまくっているせいで、
上のレイヤーが邪魔で選びたいレーヤーを
うまく選択できない…
Photoshopを使ったことがある人なら
一度は経験した事があると思います。

そんなときは、選択したいレイヤーの上で
右クリックをすると、そのクリックした
ポイント周辺に重なり合っているレイヤーの
一覧が表示されます。
後は、選びたいレイヤー名を選択するだけです。

この方法を効果的に使うには、レイヤーを作った時に
なるべく判別しやすい名前をつけておく事が大事です。

非表示にしているレイヤーは
右クリックしたときに現れる
一覧に表示されないという点だけ、覚えておきましょう。

アクション機能

アクション機能とは、簡単にいえば
「一連の作業を1クリックで
出来るようにする機能」のことで、
キッズケータイによくある、
短縮ダイアルみたいなものです。

photoshopにはもともといくつかの
アクションが登録されています。
メニューから「ウィンドウ」→「アクション」で
パネルを開く確認できます。

また、自分がよく行う作業を新規アクションとして
登録することもできます。

アクションの登録方法

1.「アクションパネル」→「新規セットを作成」
2.名前を付けて新規セットを作成。
3.「アクションパネル」→「新規アクション」
4.名前を付けて新規アクションを作成。
セットには、これから記録する
アクションの保存先を選びます。
記録するアクションにショートカットキーを
割り当てたい場合は、
ファンクションキーのボックスを選択しましょう。
5.記録ボタンクリックで、記録がスタートします。
アクションパネルの下部に赤い丸が
表示されていれば、記録中の証拠です。
6.下左にある四角のマークを押して記録完了です。

上記の作業でアクションを作ることができ、
次回以降は面倒な一連の操作を
繰り返さずに済むというわけです。

ネットではたくさんのアクションファイルが
無料配布されており、
スマートフォンのアプリで加工した写真や
一眼レフで撮影した写真のような
雰囲気のある写真を作ることができるものや、
風景写真を漫画の背景として使えるように
加工してくれるというような
面白いものもあるので探して使ってみてください。

画像を反転させる方法

皆さんはレイヤーを反転させる時、
どういう手順を踏みますか?
多くの方が「編集」→「変形」→
「水平方向に反転」という手順で
反転させているのではないかなと思います。

わたしもついこの間までは、
この手順でやっていたのですが、
職場の先輩からもっと簡単に
反転させる方法を教わってからは、
以下の方法で反転させています。

Ctrl+T→左右反転の場合は
オプションバーのWの値を-100%、
上下反転の場合はHの値を-100%

垂直と水平、どっちがどっちか
よくこんがらがってしまう人にはおすすめです。

ワンクリックで作業したい部分に一瞬でとぶ

photoshopには、
30近くものツールパネルがありますが、
まだ使ったことのないものも結構あるという人が
大半なのではないでしょうか。

わたしも、どのように使うのか知らないパネルが
まだたくさんあります。
ですが、最近ふとしたきっかけで
毎日使うようになったパネルがあります。

それはナビゲーターパネルです。

ナビゲータパネルには画像全体が表示されいて、
現在のウィンドウに表示されている部分が
赤枠で囲まれています。
この赤枠を移動させる事で、
表示されている部分も瞬時に移動させることができます。

このパネルのおかげで、
WEB製作時(特にLP等、縦に長いサイト)の移動が
かなり楽になりました。

以上、7つの小技を紹介しました。
ひとつでも、あなたの日々のお仕事に
活せるものがあれば幸いです。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年2月25日

トレンドカラーの決め方

how-to-decide-trend-color

よくテレビなどで
「今年のトレンドカラーは…」
と耳にすることも多いのではないでしょうか。
大体の方は
「今年はこの色が流行るのか」
などと、特に思うこともなく聞き流しているはずです。
しかし、ここで疑問を感じる人がいるのではないでしょうか。
毎年変わるトレンドカラーを
いったい誰が決めているのでしょうか?
今回はトレンドカラーの決まり方と、
今年のトレンドカラーについて記事を書いていきたいと思います。


トレンドカラーとは?

「トレンドカラー」つまり流行色のことです。
流行色は、ある一定の期間に
集中して流行る色相や色調のことを指します。
よくファッション雑誌で
トレンドカラーをファッションの流行色として
取り入れられていたり、
webサイトのデザインで取り入れられていたりします。

春夏、秋冬と2回に分けて発表されています。
また、今年のトレンドカラーとして
発表されていたりもします。

実は2年前から決まっている!

毎年変わるトレンドカラーですが、
国際流行色委員会(インターカラー)という国際組織により、
実は2年前から決まっています。

国際流行色委員会とは

国際流行色委員会は
インターカラーとも呼ばれている、
非営利の色彩情報団体のことです。
各国1団体ずつから構成されており、
ファッションを用いる流行色を選定しています。
加盟国は、アメリカ、イギリス、イタリア、韓国、
スイス、スペイン、タイ、中国、デンマーク、ドイツ、
トルコ、日本、ハンガリー、フィンランド、
フランス、ポルトガル(2016年12月)となっています。
日本、フランス、スイスは発起国となっており、
1963年に発足しました。
加盟各国が提案色を持ち寄り、
6月に春夏カラー、
12月に秋冬カラーを決めています。
2年前に決めているので、
どこよりも早く情報が決まり、
ファッション流行色情報の中心となります。
そして、その話し合いを持ち帰り、
日本の代表団体である「日本流行色協会(JAFCA)」が
シーズンの約1年半前に
国内市場向けに方向性や素材など話し合われ、
正式にトレンドカラーが決定します。
その後、ファッション情報として
消費者に商品として伝達され、
トレンドカラーが流行します。
トレンドカラーを早く決めることにより、
メーカーなどファッション業界に
選定色を反映させることができます。
つまり、トレンドカラーを浸透させるには
約2年間を要することがわかりますね。

パントン社のトレンドカラー

インターンカラーの他にも、
世界で使用されている色見本帳の一つである、
パントンのパントンカラー・研究所からも
トレンドカラーは発表されています。
パントンといえば、デザイナーの方なら
誰しも1度は聞いたことがあると思います。
グラフィックデザインや、
印刷などに、色を指定する際に使われています。
毎年12月に「カラー・オブ・ザ・イヤー」として
主にデザインなどに携わる人に向けて発信されています。

今年のトレンドカラー

パントン・カラー研究所から
2017年のトレンドカラーは、安らぎと再生の緑である
「グリーナリー(Greenery)」
となりました。
春を思わせるような、鮮やかで、
目に優しい、黄緑色です。
身近なものだと、
抹茶を彷彿させそうです。
パントン社が
「自然の結びつき」「新たな始まり」
という意味を込めて、選定したそうです。
安らぎとあるだけあって、
見ているだけでほっとするような色合いですね。
日本流行色協会からは、
テーマカラーといい、
その年を象徴する色合いが発表されています。
トレンドカラーとは違い、
これから流行する、流行した色であり、
少し外れてしまいますが、ご紹介したいと思います。
2017年を象徴するカラーは
「リーディングレッド(Leading Red)」
が選ばれました。
選定理由として
「決断、エネルギー」「人間らしさ」「日本」
の3つのキーワードが挙げられています。
リーディングレッドというだけだあり、
明るくすっきりとした赤色です。


春夏のトレンドカラー

同じくパントン社から
ナイアガラ
ラピス・ブルー
アイランド・パラダイス
グリーナリー
ケール
ヘーゼルナッツ
プリムローズ・イエロー
フレイム
ペール・ドッグウッド
ピンク・ヤロー
が選ばれました。
今年のトレンドカラーである、
グリーナリーも入っていますね。

自然を彷彿させるような色合いが
多い印象を持ちました。
日本流行色協会からは全体的に
グレーがかった色合いから、
大体なビビッド色を使った
組み合わせが多い印象を受けました。

そこにもトレンドカラーである
グリーンが使われています。
2017年のトレンドカラーである
グリーンが流行することが分かりますね。

まとめ

いかがでしたでしょうか。
個人的に、グリーンが大好きなので、
トレンドカラーに選ばれていて、
とても嬉しく思います。
周りにたくさん取り入れたいと思います。
そして流行色はたまたまはやるというわけでなく、
2年前からじっくりと世界各国で話し合い、
戦略を立てて、計画されて流行していることが分かりました。
私はこの話を学生の時に聞きました。
それまでは、
たまたま流行っているのだろうと思っていたので、
初めて聞いた際には、
人の手で操作され流行っているのは、
とても面白いなと感じました。

確かに2年くらい前でないと、
流行にメーカーなどが追いつかないですよね。
いちはやくトレンドカラーを知る方法としては、
展示会に足を運んでみるのも手です。
その色にも合わせやすそうなグリーナリーですが、
組み合わせに悩んだ時は、
パントン社のHPに組み合わせに適した色合いの画像が
掲載されているので、
そちらもチェックしてみてはいかがでしょうか。
2017年のトレンドカラーである、
グリーンをファションやデザインに
是非取り入れてみてください。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年2月3日

Web制作者向け便利ツールをご紹介!

introduction-of-useful-tools-for-web-makers

Web制作者のみなさま、いつもの制作作業の中で
「あとちょっとこの作業を効率的にできたら、
もっと早く仕事がこなせるのに・・」というような悩み、
一度は思ったこと、ありますよね?

そんなあなたに、いくつかの便利ツールをご紹介します!

おすすめのブックマークレット

まずはおすすめしたいブックマークレットを
いくつかピックアップ。

ブックマークレットとは、通常、
ブラウザでお気に入り(ブックマーク)を選ぶと
指定のホームページに飛びますが、
登録URLの代わりにJavaScriptで構成されたプログラムを
ブックマークすることで、それを選んだ時に指定のプログラムが
そのページで実行され、早く、簡単に機能が実現できるのです。
そういったものをブックマークレットと言います。
インストールもお手軽で、そのコードをブックマークするだけで
行えるんですよ。

画像のalt属性を一発で確認出来るブックマークレット

画像を入れて、altが入っているか、最終チェックが必要ですよね。
そんな時に便利なのが、こちらのブックマークレット。
例えばYahooのトップのaltを確認しようとすると、
このような表示になります。

少し画面が崩れますが、画像のalt属性を全て検証モードで
確認するよりは手軽に確認ができますね。

useful-tools-02

▼alt属性を確認するブックマークレット。|trustworks

http://www.trustworks.biz/blog/2008/04/alt.html

HTMLタグの閉じ忘れを教えてくれるブックマークレット

閉じタグ忘れ、よくありませんか?
このブックマークレットは、
閉じタグが多かったり少なかったりするのを教えてくれます。

急なページの崩れが起こったら、
まずこちらで確認してみましょう。

HTMLタグの閉じ忘れを教えてくれるブックマークレット

▼HTML内タグの閉じ忘れをチェックするツール[ブックマークレット]|とっくりばー
http://tockri.blog78.fc2.com/blog-entry-168.html

フォントの名前を知らせてくれるブックマークレット

このサイト、なんのフォント使われてるんだろう?
と気になった方はこちら!

検証モードでcssを探さなくても、その場所が
なんのWebフォントが使われているか教えてくれます。

フォントの名前を知らせてくれるブックマークレット

▼WHATFONT TOOL|Chengyin Liu
http://www.chengyinliu.com/whatfont.html

レスポンシブWebサイトのデバイスサイズ別チェックできるブックマークレット

クロームなどは特に拡張機能でも同じようなものがありますが、
よりデザイン的で、より視覚的で見やすいですね。

デザインも整っているので、
レスポンシブが楽しくなりそうです。

ただし、こちらのブックマークレットは
ブラウザ幅を取得し、viewport(ビューポート)で
デバイスサイズ別に表示させているサイトでのみご使用頂けます。

アクセス時にパソコンかスマートフォンかを
取得して振り分けているサイトにはお使いいただけませんので、
お気をつけて。

レスポンシブWebサイトのデバイスサイズ別チェックできるブックマークレット

▼VIEWPORT RESIZER|maltewassermann
http://lab.maltewassermann.com/viewport-resizer/

画像や要素の幅や高さ、プロパティを表示できるブックマークレット

画像や要素の幅・高さを、いつも検証モードで
調べているのですが、
パッと確認したい時にはオススメです。

背景画像のサイズ取得までできれば最高なのですが、
背景の時はブロック要素のプロパティを取得してしまうようなので
そこはまだ検証モードが必要そうですね・・。

画像や要素の幅や高さ、プロパティを表示できるブックマークレット

▼XRAY: look beneath the skin|westciv
http://www.westciv.com/xray/

META、短縮URLなどのページ情報を一括で表示できるブックマークレット

titleやdescriptionなどのMETA情報をはじめ、
サムネイルなど、ページの基本情報を見ることが出来ます。

こちらで個人的に一番オススメなのは、
短縮URLを表示できることですね。

長いページの短縮URL発行に
いちいちGoogleのサービスページまで飛ばないのは
結構便利な気がします。

META、短縮URLなどのページ情報を一括で表示できるブックマークレット

▼XRAY: look beneath the skin|westciv
http://geturlinfo.com/

おすすめのChrome拡張機能

最近だと、標準ブラウザに動作の早い
Google Chromeをお使いの方も多いのではないでしょうか?

Chromeにはたくさんの便利な拡張機能があります。
拡張機能のインストール自体はとても簡単で、
chromeウェブストアから、欲しい拡張機能を選択するだけ。
クリックしてインストールすれば、もう使うことができます。

さてここからは、いつもの業務がちょっと早くなる、
おすすめChrome拡張機能をご紹介します。

ブラウザにデザインを重ねてコーディングチェックできるChrome拡張機能

htmlページにファーストデザインなどの画像を
うっすらとしたレイヤーで乗せることができる
Chrome拡張機能です。

レイヤーの透明度を変更する箇所や、
矢印キーで細かな位置調整ができる箇所もあるので、
PSDが分かれていたりしても
パーツごとに重ねてチェックもできますね。

デザイン通りにコーディングされているかのチェック以外にも
ブラウザ上で画像を横に置いて比較したい時にも便利です。

ブラウザにデザインを重ねてコーディングチェックできるChrome拡張機能

▼PerfectPixel by WellDoneCode|Chrome拡張機能
https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

増えすぎたブラウザタブを整理させるChrome拡張機能

個人的な意見ですが、この拡張機能、だいぶ画期的です。

よく調べ物をしていると、ブラウザにタブが増えすぎますよね?

私もよくなります。。
こんな感じになってよく迷子になりますが、
下手にタブを消すと、せっかくの参考サイトが
URLわからなくなったりするので
迷子の中探し回ることがしょっちゅうです。
(都度閉じればいいんですけどね)

この拡張機能があれば、 OneTabのメニューを押すだけで、
1 つのタブにサイトのタイトルとURLを
一覧で見やすく表示してくれるのです!

いつもタブ迷子になっている方、
ぜひこの拡張機能をインストールしてみてください。

増えすぎたブラウザタブを整理させるChrome拡張機能

▼OneTab|Chrome拡張機能
https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall

1クリックでキャッシュをクリアできるChrome拡張機能

構築中のサイトのキャッシュがきつくて、
画像やcssを差し替えるたびに
キャッシュをクリアしなくてはいけない・・

もしくは、軽微なサイト修正があり、
差し替えたはずのバナー画像が切り替わらない・・

そんな経験、誰しもありますよね?
画像のURLを変えるのがベストですが、
ちょっと修正したいだけなのに!
というときも根強いキャッシュ。

そんなときにはこの拡張機能がおすすめ!

最近Chromeのキャッシュクリアが
設定から2、3クッションおかないとクリアできなくなって、
非常に面倒だと感じていた私には、
これまたかなり便利な拡張機能。

一瞬ボタンを押すと、
アイコンが緑にふわっと切り替わるのですが、
無駄な数秒をコンマ数秒に省けて大変重宝しています。

毎度毎度のキャッシュクリアに辟易しているあなたは、
ぜひこちらのChrome拡張を使ってみてください。

1クリックでキャッシュをクリアできるChrome拡張機能

▼Clear Cache|Chrome拡張機能
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn/related

まとめ

いかがでしたか?

これらの便利ツールで、毎日の制作が少しでも早くなり、
ストレスフリーな制作に近づけられるといいですね。

ぜひお試しください。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年1月31日

見た目以上のフラットデザイン〜メリットとデメリット〜

flat-design-merit-and-disadvantage-beyond-appearance

皆さんフラットデザインという言葉は知っていますか?
少し前から、Webサイトなどでトレンドになっています。

いつの間にか色んなサイトがフラットデザインになっていたり、
OSやインターフェイスで使用されていたりと
見かけることも多いと思います。
手元にあるスマートフォンに表示されるアプリのアイコンも
フラットな物が多いはずです。

今、人気のデザインと思われることも多い
フラットデザインですが、実は見た目以上に意味があります。
今回はフラットデザインについて記事を
書いていきたいと思います。

フラットデザインとは

フラットデザインとは2012年頃から広まった、
webデザインのスタイルのことです。
では、フラットデザインとはどのようなものを指すのでしょうか?
代表的な物はWindows8から採用されたインターフェイスの
「メトロUI」
や、iPhoneのOSで採用された
「ios7」
がフラットデザインとしてあげられます。
日常的に目にするこの2つから、
フラットデザインや
フラットUIを知った人が多いのではないでしょうか。

次にフラットデザインで作られた参考サイトを見ていきます。

フラットデザインの例

京都宇治伊藤久右衛門
http://www.itohkyuemon.co.jp/

ひめの麦畑
http://www.himeno-mugibatake.com/

Lorenzo Verzini
http://lorenzoverzini.com/

フラットデザインの特徴

上記のサイトからフラットデザインの
特徴がなんとなく伝わったはずです。
簡単に特徴を説明していきます。

  • 平面である
  • 装飾がない
  • シンプル
  • 一目で分かる
  • 情報が整理されている
  • 色鮮やかで見た目が華やか
  • フォントがモダン調

フラットというだけあり、
質感や立体感がありません。
フラットデザインの一番の特徴です。
ボタンやロゴに注目すると、
エフェクトやグラデーションが無いことが分かります。
また、文字などの各要素がとてもシンプルです。
情報も最小限にしかありません。

レイアウトも一目で分かるようになっています。
そして、シンプルだけでなく色を多用しているため、
見た目がとても華やかになります。

見た目以上の意味

特徴的なフラットデザインですが、
なぜここまで一気に広がったのでしょうか?
実はデザイナーやユーザーにとってメリットがあるからです。

スマートフォンの普及

まず、スマートフォンの普及が大きな要因です。
パソコン画面の場合、質感や立体感を出したり、
フォントを細かく設定してもしっかり、
美しく表現することができます。
このような手法はリッチデザインと呼ばれます。
木目の素材感を出したりなど、
実際のものに寄せています。

これがスマートフォンだとどうでしょうか?
ほとんど潰れてしまい、
せっかくの綺麗なボタンなどが
見えづらくなってしまいます。
これがフラットデザインだと、
装飾や文字が最小限なので、
スマートフォンの画面でもしっかり見え、
ユーザーにとってメリットがあることが分かります。

デバイスの多様化

デバイスの多様化によりパソコンやスマートフォン、
タブレットとユーザーが
どれを使ってサイトを閲覧するか分かりません。
どのデバイスからも
最適化されたサイトを閲覧できるよう、
デザイナーはレスポンシブという方法をとります。

実はそのレスポンシブは
フラットデザインととても相性がいいのです。
フラットデザインを採用しているサイトの多くが、
グリッドレイアウトを意識しているものが多いです。
グリッドレイアウトはページ内にグリッドを引き、
余白をもたせ、コンテンツを当てはめていく手法です。

グリッドを意識しているため、
情報がまとまっており、ユーザーにとって、
とても分かりやすくなります。
また、どのデバイスからも読み込みが早くなり、
スタートアップに最適です。

もちろんデザイナーや制作会社側のメリットもあります。
配置や色に上点を置くため、
フラットデザインの特徴である、
シンプルさによってアイコンなどの
制作作業が軽減されます。

レスポンシブの際に、
グリッドを意識しているため、
コンテンツの配置がしやすく、
自由に配置するより、
表示が変化した時に形作りやすくなります。
画像も配置がしやすくパソコン上では
綺麗に見えていても
スマートフォンだと右端が切れて、
見えづらくなることも無くなります。

また、パソコンとその他デバイス上での
イメージの変化が少ないことも
メリットとしてあげられます。
このようにフラットデザインは作り手から受け手まで
幅広く要素を持っていることが分かります。

デメリット

メリットばかりだと思っているフラットデザインですが、
注意点もあります。
シンプルさを追求しすぎると、
ユーザーはどのボタンが次のアクションに繋がるのか
分からなくなってしまいます。
例えば、このボタンはリンクへと繋がるのか?
これはそもそもボタンなのか?
と混乱を招いてしまう可能性があります。

そして人気故に、
似たようなサイトができてしまうということです。
デザイナーの個性がまり出せないところも
デメリットとしてあがります。
A/Bテストなどを行い、
デメリットをうまくカバーすることが
大切なのではないかと思います。

まとめ

いかがでしたでしょうか?
見た目が華やかで、かわいいフラットデザインも、
ユーザーだけでなく、作り手側のデザイナーにもメリットがあり、
流行のスタイルというだけでなく、
理由があることが分かりました。

マルチデバイスに適応したフラットデザインですが、
目的によって使いづらい場合があると思います。
フラットデザインを使うのか、リッチデザインを使うのか、
ユーザーにとっての使い勝手を理解して、
Webサイト制作をしていくことが大切です。
時代と共に変化してきた
インターフェイスであるフラットデザインを、
うまく使えるように、経験を積んでいきたいと思います。

このエントリーをはてなブックマークに追加
メルマガ登録