もしかしたら初めてYoutube広告に釣られたかもしれないと思ったんですが、先日Youtubeをなんとなく眺めていたらgrammarlyの広告が流れていたんですね。これ自体は結構前から知っていたWEBサービスで、英文の校正サービスとしては以前からあったんですね。ただ、英文チェックまでの過程が長かった。たしか以前は、英文アップロードして、チェックして、評価して、内容確認してと、なんか色々面倒なイメージがあったんですね。実際そうだったと思うし。 なので「今さらYoutube広告打ったのかね」と一瞬思いはした物の、その広告がやたら毎回英文チェックめんどくせぇの心を擽るくらい良く出来ていたので、まんまと釣られて使ってみたという流れです。 それがまぁ、以前の原型なんてとどめて居ないくらいに進化していたので、今日はここで共有させて頂こうと思います！ 凄まじく進化した英文チェック工程と精度 とりあえず、

ここのところ、バンクーバーにある専門学校の方とお話することが多いのですが、WEBデザイナーの専門学校なんかの授業でもハイブリッドアプリの科目が取り扱われているみたいですね。最近はWEBデザイナーに必要なスキルの一つとしても、HTML5のハイブリッドアプリ開発は大事になってきてるんじゃないかなと思ったので、これから色々勉強してみようと思っている方向けに最初のとっかかり記事を情報共有として記事を書かせて頂ければと思います。 僕自身もアプリ制作専門で活動したことは無いのですが、最近は「WEBサイト作りましょう」で、モバイルの話が上がる事はほぼ絶対になってきていますよね。で、WEBという媒体を使って何かを提案する姿がWEBデザイナーである以上、そうやってフィールドがモバイルにも派生しているのであればアプリ面の知識も「全く知りませんでした」は正直避けたい所になっていくのではと思っています。 というわ

ただのぼかし加工プラグインなら紹介するまでも無いかと思いましたが、丁度今進行中のプロジェクトでも使えるかもなと思ったくらいに丁度良かったのでご紹介。 最近はワンページデザインなんかに良く見られる背景をぼかした写真で表示するようなデザインって良く見ますよね。あれって実際作ってみると分かるんですが、ただ単にぼかせば良い感じになるかって言われると意外と難しい表現の一つだったりする。ぼかすだけであれば今やCSS3でも表現は可能ですが、微妙な調整やJS使ってカルーセルなんてしようと思うとなおのことイミフになりやすい。ブラウザ対応も面倒。 そんな時、今回ご紹介するImage Blur Pluginは、細かい調整も可能だし、様々な用途で使えそうだったので、是非覚えておくと良いかもしれません。 ぼかし画像の切り替えにも対応 Switch Header Imageの画像をクリックするとヘッダー上の背景ぼかし

僕のワイヤーフレームツールの偏食の遍歴は長く。パワポから始まり、エクセル、HTMLワイヤー、イラレ、Photoshop ElementsにCacooにGoogle PresentationにSketchと手書きと、とにかくアホみたいに色々なツールで作ってきました。2014年時点ではUI Stencilsでしたね。 ただ、偏食を繰り返して来たからこそ思うのが、ワイヤー作成に必要な能力やスキルは多くの場合一定しておらず、プロジェクトによって全く違うという事。それこそメンバーの共通認識が取りやすい（過去の事例や参考が多い）案件と、そうじゃない物でどこまで時間をかけるかも変わるし、単にスピード命で作って泣きを見た事も、細かく作りすぎて怒られた事も何度もありました。手書きがベストなシチュエーションも間違いなくあるし、どれが絶対というのは無いとは思います。 ただ、欲を言えば、スピード、修正の容易さ、レ

まぁ、ぶっちゃけいつの時代も情報収集なんて大事にきまってんですが、今年は特にIoTの流れが急速に進みつつありますし、どのメディアでもVRだったり、リアルタイムメディアの成長についてだったり、変化の兆しが非常に顕著にあらわれていると思います（まぁ毎年ですが…）。 WEBからモバイルへ移り、モバイルからIoTの進化により様々なデバイスへフィールドが移ろうとしつつ、その次は、その次は…、その次…。 僕らの主戦場もなかなかに落ち着きを見せないようですが、まぁ落ち着く事なんて僕らが生きてるうちに訪れるのかと思うのと、そんな時代の流れを含めて楽しむのがWEB屋かなと。 と、言うことで、今日は改めて情報収集に関する記事として、このメディアは見といた方が良いよねってリストを改めて整理してみましたので、共有させて頂きたいと思います！かなり雑多にまとめるので、自分にとって学びになりそうな物をチョイスしてみて貰

僕はFrogというクリエイターの留学サポートを行う会社を運営しています。僕自身もWEB業界の人間なので、未だに色々なことを聞かれる事が多いですが、もちろん今日は僕自身の留学経験の話をしようとは思っていません。 相談を受けるようになってからは早4年が経ち、海外生活は人生の約1/3を迎える事になってしまいましたが、僕はここ数年、留学というキーワードと結構真面目に向き合ってきました。どれだけ大きな留学斡旋をしているどんな人より、少なくとも僕らのクリエイティブな、専門的な業界における留学では最も情報と知見を広げてきた自信があります。何十社という会社を周り、何百人という相談者を話をし、様々な国のクリエイターと話し、政府公認のコンサルタントや弁護士とも幾度となく話をしてきました。 その結果として出した答えが、今の日本の『留学』は半分終わってる。少なくとも今のままじゃあまり意味を成さない。グローバル人材

やっべぇ、これ便利！って思ったので即共有！これまでSprite画像作る時って皆さんはどうしてましたか？僕はCSS Sprite Generatorというサイトを使って画像を生成していました！ しかし、さっき見てた記事でなんと、Compassを使ってSprite画像を生成する方法が紹介されていて、今さっき試したら結構ツボにハマったので、まずはこの興奮のまま皆さんともシェアさせて貰えれば嬉しいです！ 参考にさせて頂いた記事は以下なんですが、結構詳しくCompassで作るCSS Sprite画像の作り方が紹介されています。まずは僕も試してみた簡単な概要部分をちょっとご紹介させて頂きましょう！SassとCompassの基本的な使い方はググって頂ければ嬉しいです＞＜ How to automatically generate CSS sprites with Sass and Compass | C

相変わらずWEB屋にとっては面倒くさいRetina対応…。@2x、@3x、解像度に合わせて毎回画像を作るのも、正直面倒くさいですよね。個人的には何か根本から解決してくれるような仕組みや対策が出てこないかなと、相変わらず他力本願でお待ちしています。 とはいっても、現時点で出来る限りの対応はしなくてはならないので、今日は僕が知っている画像作成時のRetina対応を少し便利にするツールやアプリ（一部使い方？）等をご紹介させて頂ければと思います。 Retini @3xサイズの画像をドラックするだけで、@2x、通常サイズと一瞬でコンバートしてくれるシンプルなアプリケーション。こっちのWEBメディアの運営してる会社で働いてる人が教えてくれました。意外と知ってれば使えるタイミングがありそうなので共有。 Retinaize it ツールというわけじゃ無いかもですが、PhotoshopでRetina解像度の

特定の文章やソース、URL等をコピーしてもらう時、テキストエリアやフィールドをフォーカスしてコピーするような機能を実装したい時ってありますよね。そんな時便利なのが今回ご紹介する『clipboard.js』。 結構クリップボードにコピーの機能って簡単そうに見えるんですが、Flashを使って実装してるとこが結構多かったので、丁度僕も実装を検討していた機能でもあったこともあり、ここで共有させて頂ければと思います。 No Flashな上に非常に軽量、わずか2kb Flashを使わない上に、他のフレームワークにも依存しないため結構気軽に使えそうです。インストール等も基本的にはClipboard.jsの説明を辿れば簡単に実装出来るかと思います。 コピー成功失敗の判定も出来るので、コピーした後に何か機能を実装したりすることも可能みたいですね。 簡単にお試し頂けるかと思うので、是非どうぞ〜。 clipbo

ここ最近に限った事ではありませんが、やはり良く聞かれるのは『海外のデザイナー達はどんなデザインツールを使っているか』というお話、ツールはツールでしか無いので、もちろん自分の技術に対する根本のスキルを磨き、知見や情報を集める努力は必要だと思いますが、それでも便利なツールがあるなら知っておくに越した事は無い。 なんだかんだでPhotoshopかSketchかみたいな議論は飲み会で話題になったりするし、どっちが人気なのか、気になってる人は少ないわけじゃないとは思うんですよね。 今回ご紹介する『2015 Subtraction.com Design Tools Survey』では、196カ国、4000人を超える対象者からアンケートを取り、ブレインストーミングからワイヤーフレーム、インターフェースデザインにプロトタイピングなどなど、あらゆる面から使っているツールのアンケートを取ってくれているので、是

これはすごい！普通にWEB制作者としても勉強になる程使いやすいインターフェースで、これまで使ってきたどんな簡単サイト制作サービスよりシンプルで、何より使い勝手がめちゃめちゃ洗礼されたXPRS（エクスプレス）というWEBサービスをご紹介します！ とにかく使いやすいさがピカイチ！ これ、勉強になる部分が多いなぁと関心してしまうくらい操作方法がとにかく分かりやすい。元々は複雑なWEBページデザインをWEB上でやっちまおうなんて物だったんだから、自由度を求めると、とにかく操作がわかりにくいし、想像していた表現とはまったく違う動作をするなんて事良くありましたが、今回のXPRSは直感的に操作しても自分の想像していた通りに作れるし、日本語タイプも問題無く動作。テンプレート数とか、機能面の見劣りとか、色々他と比べてしまう部分があるにしても、それでもこの使い勝手の良さは一度試してもらう価値がある物かと思いま

ものすごいWordpressテーマが出たなーという事でこちらでもご紹介。北米圏で様々なテンプレート販売を行っている大御所と言えばTemplate Monsterが大御所かと思いますが、ここから（現時点では）究極と言って良いんじゃないかというレベルのWPテンプレート「Monstroid」が登場しました。 今までこのブログでは有料WPテーマの紹介等はしたことが無かったのですが、巷で結構ニュースになっていたのでこちらでも共有させて頂ければと思います。 とにかく、ありとあらゆる機能が実装 驚くべきはその機能面／選択肢の充実度です。145種類に渡るページテンプレート、120を超えるPSDファイル、50を超えるライセンス付きのイメージ画像。 バックアップは勿論、当たり前のようにレスポンシブデザインにも対応し、スキン変更も自由自在、E-Commerce機能にSEO対策済みで、Analytics実装、サー

WixやSquarespace、Strikingly等のWEBサイトが簡単に作れるサービスは多かったかなと思いますが、先日友人に教えてもらったGoodBarBerというスマートフォンアプリを作るためのプラットフォームが、取り敢えず次世代だなみたいな感じに思えたので、ここでも共有させていただこうと思います！ GoodBarBerは、スマートフォンやタブレットアプリを作る為のプラットフォームを提供しているWEBサービスで、簡単なデザインからコンテンツの追加、プレビューにパブリッシュまでの流れを非常にわかりやすく説明してくれているので、それこそブロガーが自分のブログ専用のアプリを作るも良し、グラフィックが得意なデザイナーがポートフォリオとして作るもよし、用途としては色々考えられるかなと思いますね。 簡単な流れだけ説明すると以下のような感じです。 アカウント作成 アプリ名、カテゴリ、アカウントID

別にWEB屋に限らず、誰かとチームを組んで作業する時、いかにしてコミュニケーションの質を上げるかと考える人は多いと思うんですね。 かくいう僕なんかは、たかが数人のチームコミュニケーションでも相当大変な思いをしているので、これが数十人と規模が拡大した時のことを考えると憂鬱なので、ぼちぼち対策を考えないといけないなと思うんですね。 そこで今日は、とりあえず手っ取り早くコミュニケーションの質を上げる為になんか良いツールが無いか探してみる事にしたので、ちょっと共有してみようと思います。EvernoteとかDropboxとかBasecampとかはとりあえず省いて、ここ数ヶ月の間に使い出した／知った物を中心にご紹介させて貰えればと思います！ もちろん、コミュニケーションの質をあげようという考え方自体人によってまちまちでしょうし、必要なのはツールでは無く意識の問題であることが多いのは承知の上なのですが、

ここ最近は大手メディアなんかでもフリー素材を記事につかってアイキャッチ画像としている所が多いですね。コンテンツ力を高めようとする一方で、目を引く写真等を使ってファーストインプレッションを大事にしている記事も多いように思えます。 ですが、自分が知っている範囲でのフリーフォトストックって、以外とすぐに使い果たしたりしちゃいますよね。Creative Commonsライセンスの物を探そうと思うと意外と一苦労だったりします。写真の系統も「またか…」って思うような使い回しをしているサイトも多いですが、個人的には一つの記事に対し一つの写真（印象）を残すということは意外と大事なのかもしれないと思わなくも無いので、同じような写真は個人的に出来るだけ使わないようにしてます。 そんな時に、どうしてもフリーストック系の写真を探したい時に便利なのが今日ご紹介する『AllTheFreeStock.com』です！ こ

さて、先日バンクーバーな僕らをリニューアルしました。得に特別な事をしたわけでは無いのですが、ここ最近とにかく会社の事やらシェアハウスの事やらでテンヤワンヤしておりまして、自分の制作環境の話等を書いておらず、情報が昔のままになっていたので、今日はさっきまで色々試しながらこのサイトを作ってたという事もありますし、忘れない内に覚えてる範囲で備忘録的に書いておこうかと思います。 恐らく今後もどんどん変わっていくかと思いますし、まだまだ学び途中の物も沢山ありますが、まずは参考にした物も含め共有させて頂きます。去年書いた記事と比較しながら読むとちょっとは楽しめるんじゃないかと思います。 レスポンシブやらアイコンフォントやらフラットやら！2013年の気になる技術やデザインを試してみたリニューアル手順！ また、このブログでは何度か触れていますが、もはや僕はクライアントのために手を動かして何かを作るという事