デザイナーさんなら誰しもが経験する顔の補正や調整。 「もうちょっと顎を細くして」とか「目を大きくして」とか「歯を白くして」などなど…あれって結構時間かかりますよね？ 今回は、PhotoshopCCから実装されたゆがみフィルターの「顔立ちを調整」を使ってみたところ、想像以上にカンタンでキレイな仕上がりになったので皆さんにもご紹介いたします。 顔の補正事例の紹介 百聞は一見にしかず。まずは補正した画像をご覧ください。どれも1分くらいでパパっとした補正です。 (※GIFアニメでBefore/Afterが確認できるようになっています。) 補正事例1 キリッとした男性の頬を少し削り目を大きく＆微笑みをプラスしました。イケメン度があがりましたね。 補正事例2 携帯で話している女の子をさらに小顔＆笑顔に。顔の近くにある携帯の歪みはそれほど気になることなく補正できました。 補正事例3 キリッとさせるだけで

WEB企画では、デザインレビューの際に「InVision」というWebサービスを使っています。半年ほど前から試験的に使い始めた「inVision」ですが、使ってみるとかなり使い勝手がよくデザインチェックが短い時間で的確にできるようになりました。 今では手放せないツールの一つとなった「inVision」。今回はこのinVisionの便利な点と具体的な使い方についてご紹介したいと思います。 inVisionとは まずは簡単にinVisionについてにご説明。InVisionはアプリやホームページのプロトタイピングを複数人で効率的に作成することができるWebサービスです。 EvernoteやAirbnbといった有名企業もアプリ開発の際にこのinVisionを採用しているんだそうです。なんだかすごそうですね。 inVisionにデザインやワイヤーフレームをアップすることで、デザインに対してのコメン

スマホデザインが捗る！Photoshop CC 2015では今開いているPSDがリアルタイムにiPhoneで確認できるぞ！ シェア つぶやく ブックマーク LINE Pocket 2015/6/16にAdobeのCreative Cloudが2015年リリースとしてアップデートいたしました。 そのアップデートの中で、個人的に待ちに待っていた機能がPhotoshopに搭載されたのでご紹介いたします。デバイスプレビューという「今開いているPhotoshopの画面がiPhoneで見れる」機能です！ 今まで、スマホのデザインを確認するときは 「Photoshopでデザイン作成」→「書き出し」→「iPhoneに画像転送(確認)」 というものでした。一度だけの確認ならいいのですが、デザインの微調整をする際は何度も画像を書き出しては確認、画像を書き出しては確認…と繰り返しになるので結構時間を取られる作業

css3でアニメーションを使用するサイトが近頃増えてきました。背景としては、css3アニメーションのプロパティにほぼ対応しているスマホ端末の普及や、animationプロパティ未対応のIE9（IE6～IE8を含む）のシェアが低下してきていることが挙げられると思います。 つまり、css3アニメーションの対応ブラウザは「増加中」ということに他ならず、実装するサイトは更に増えていくのではないでしょうか。 今回は、そんなcss3アニメーションの実装時に参考できる22サイトを集めてみました！ 1：丸型オブジェクトにピッタリのアニメーションギャラリー 丸型オブジェクトに対して、様々なホバーエフェクトを実装しています。 何気なくマウスオーバーした時にこんな動きがあれば、注意を引きつけられそうですね！ http://tympanus.net/codrops/2013/05/30/simple-icon-h

こんにちは、ホームページ制作会社「ウェブ企画」の東京渋谷オフィスでディレクターをしている竹内です。 もう少しで長かった冬も終わり、春を迎えますね。 春からWebデザイナー業界の門を叩かれる方も、きっと多いのではないでしょうか。 昔とは違い、最近は「デザイン＋htmlコーディング」だけでなくWebデザイナーでもディレクション能力や、「WordPress」などのCMSの扱い、プログラム言語の「PHP」「JavaScript」などプラスアルファを求められることが多くなっているように感じます。 そこで今回は、先述したプログラム言語「JavaScript」の数あるライブラリの中でも、最も有名なjQueryについて、「プログラムについて全く知らない！」という方向けに簡単に概念や、jQueryで出来ることについてご説明させていただきたいと思います。 jQueryを使えるデザイナーは、今後必ず重宝されます

皆さん、師走をいかがお過ごしですか？ 今回は前々から試してみたかったSVGについての記事です。 基本予備知識0から色々触ってみて、SVGはどんなことができるのかとSVGの面白いなーと思った点等をまとめてみました！「これからSVG試してみようかな？」と思ってる方(特にWEBデザイナーさん)の参考になれば幸いです。 それではどうぞー！！ SVGとは その前にSVGについて簡単な説明しておきます。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータです。 その始まりは1998年と意外に古いのですが、ブラウザ対応が追いついておらず、長い間陽の目を見ることがなかったかわいそうなやつです。 SVGのいいとこ SVGがJPEG等の画像と比べていいなーと思

突然ですが、皆さんはPCで見ているサイトをスマホで見たい時どうしていますか？ 私はチャットワークやエバーノートにURLを送って確認することが多かったのですが、最近「Pushbullet」というアプリを知ってからはこれが手放せなくなりました。 かなり便利なアプリだったので良いところをまとめてご紹介いたします。それではどうぞ！ 「Pushbullet」とは Pushbulletとはファイルの共有が簡単にできるアプリです。 スマホはAndoroid/iOSともに対応。PCブラウザはChoromeとFirefoxに対応しています。 Android アプリ iTunesアプリ Chrome ウェブストア Firefoxウェブストア それぞれスマホとPCにアプリ・拡張機能を入れて、Googoleアカウントで同期設定すれば簡単にURLの共有が可能になります。 もちろん、アプリを入れさえすれば複数のPCや

WEB企画ではお客さまにデザインを出す前に、ディレクターだけでなく、デザイナー同士でも入念にデザインチェックを行っています。 自分の制作したデザインについて、同じデザイナーからフィードバックをもらったり、人のデザインに対して「自分はこう思う」等の意見を述べる事はいい刺激であり、とても勉強になります。 今回はそんなデザインチェック時に、よくチェックする点・される点をまとめてみました。デザインをしていてどうも上手くいかないなーなんて時に見てみると、何か解決策が浮かぶかもしれません。 もちろんこのチェックポイントに即さなくても、素晴らしいデザインのサイトは沢山あります。「これが正解だ！」って言えないところがデザインの難しいところであり面白いところですね…あくまでも1つの指標として参考になれば幸いです。 それではどうぞ！ デザインチェック項目 レイアウト編

使いやすいサイトを目指して！入力フォームの使いやすさを劇的にアップさせるjs厳選4点ご紹介！【DEMO付】 シェア つぶやく ブックマーク LINE Pocket 「使いやすいサイト」に必要不可欠なのがお問い合わせフォームの使いやすさじゃないかと思います。そこで今回は、お問い合わせフォームを使いやすくする為のカスタマイズを色々試してみました。 お問い合わせフォーム関連のjsは色々あるのですが、今回は導入してみて個人的に使いやすいなと思ったものを厳選して4つご紹介いたします。全てDEMO付きですので是非チェックしてみてくださいね。それではどうぞ！ 1.間違いがあったらアラートを出してくれる！：validetta.js わりと基本的な機能ですが、外せないのがこれ。入力フォームに間違いがあった場合、送信時にアラートを出してどこがどう間違ってくれるかを教えてくれます。 この「validetta.j

WordPressで固定ページなどで投稿すると自動で文章を整形するタグ＜br＞や＜p＞などが勝手に入ってしまい困ってしまったことはありませんか？最近このWordPressの自動整形を制御する方法を先輩に教えてもらったので、ついでに制御方法を色々調べて記事にしてみました！ WordPressで自動生成されるタグを制御する方法 調べてみたら色々な制御方法があることが分かりました。ケースによって使い分けるのが良いかと思います。また、今回はプラグインを使わない方法のみの紹介になります。 全ての投稿に実装する場合 まずは全ての投稿の自動整形を無効にする方法です。functions.phpに下記のコードを記述するだけで実装可能です。 functions.php remove_filter('the_content', 'wpautop');　// 記事の自動整形を無効にする remove_filter

弊社ではホームページの作成だけでなく、SEO(検索エンジン最適化)も承っています。SEOとはGoogleやYahooなどを使って、あるキーワードを検索した際に上位に出るように対策をするものです。もちろん、検索した際に上位にいるほうがサイトに訪問多く訪問してもらえるので集客に有利になります。 また、SEOの対策を行う際に、一つの効果的な方法としてブログを書くことをおすすめしています。全てのお客様に言えることではありませんが、ブログを書くことで集客とSEOの点で様々なメリットが生まれることがあるんです！ ただ、継続してブログを書くのはなかなか大変なもの… 本業に追われたりなどで後回しにしてしまいがちなのも事実です。 今回は、ブログを運営することで得られるメリットとさらに集客に効果的になるヒントをお伝えしたいと思います。ブログを書くことでどういった良い効果が得られるのかが分かれば、ブログ書くやる

今回は初めてGoogleマップのカスタマイズに挑戦したので、備忘録としてやり方をまとめました。 カスタマイズできると知ってはいるけど難しそうで試したことない人も多いはず…そんな方は是非チェックしてみてください！ それではどうぞ！ Googleマップのカスタマイズをする意味 実店舗があるお店のサイトにとって、そのお店の行き方や場所が分かるマップは重要なコンテンツだと思います。初めてお店に行きたい時に、サイトにマップがあるととても分かりやすいですよね！ そんな時よく使われるのがGoogleマップです。ただサイトによってはマップとサイトデザインがあっておらず違和感を感じる場合もあります。 デザインをあわせるためにオリジナルの地図画像を作るという手もありますが、道が変更されたり、目印のお店が無くなったりするたびに変更しないといけないので正直あまり実用的ではありません。そこでオススメしたいのが、Go

今回はイラストを効果的に使っているサイトをご紹介したいと思います。 イラストは小さくてもサイトの全体の雰囲気を決める大事な要素の1つです。 それだけイラストは見ている人の目をひきやすいものなのです。 イラスト自体が魅力的でなかったり、意図の違ったイラストを使ってしまうと、ちぐはぐなイメージを与えてしまいますが、上手く使うことで、サイトの内容をより分りやすく魅力的に伝えることができます。 それではご紹介いたします。どうぞ！ ワコール　LALAN（ララン） パステルカラーで構成されており、ガーリーな雰囲気のサイトです。ところどころに描かれている手書きのりボン、白馬、豚などのイラストがガーリーな雰囲気をあげるのに一役かっています。 スクロールすると白馬が上からおりてきたり、ボタンにマウスをのせるとちょうちょが出てきたりとイラスト以外の部分でも参考になるサイトです。 福岡県立城南高等学校 サイトの

いよいよ今年も師走となりましたね！ この時期は年間を振り返るエントリーが多くなる訳なのですが、今回は2013年にWEB企画の制作チームが使ってみて良かった、SublimeTextのプラグインをランキング形式でご紹介します！ （いわゆる定番プラグインは今回はランキングからは除外させていただきました） 第5位　Placehold.it Image Tag Generator ダミー画像を簡単に挿入してくれるプラグインですね！わざわざダミー画像を作ってフォルダに入れて…なんて作業をしなくても良くなりますので、とっても便利。 placehold.itというダミー画像を挿入するサービスがあるのですが、それをそのままプラグインにして使いやすくしたというものです。 事前に設定を登録しておくことで、さらに簡単にダミー画像を挿入できるようになる機能は秀逸！ 第4位　SCSS・Compass関連のプラグイン

Chormeをメインブラウザとして使っていますが、キャプチャを取るのにしっくりくる拡張機能が無く不便でした。 でも、ついに見つけました！キャプチャをとるのに便利なChoromeの拡張機能「FireShot」を！ 今回は「Fireshot」を実際使ってみて便利だと思った点と簡単な使い方についてご紹介いたします。 「FireShot」の便利なところ 1.キャプチャの選択範囲を事前に選べる！ Fireshotはキャプチャできる範囲を事前に選ぶことができます。 選べるのは以下の4通り。 ページ全体をキャプチャ 見える範囲をキャプチャ 選択された範囲をキャプチャ ブラウザウインドウをキャプチャ 事前に選べるのでキャプチャした後に画像を切り抜く手間が省けます。 また、「選択された範囲をキャプチャ」や「ブラウザウインドウをキャプチャ」(ブラウザの枠ごとキャプチャすること)は他の拡張機能でなかなか見かけな