自分の経験をシェアしたい。Webデザインのテクニック&効率化。

Amazon Unlimitedを試すに際して、Amazon Primeに入会し、Kindle Fireを購入しました。 Amazon Primeで福岡市内どのくらいの時間が必要か、Googleで調べ …

Amazon Unlimitedのサービスが始まりました。 Web関連の本の価格の高さに悩んでいたところに、月額980円で読み放題なんて、夢のようです。 Amazon Unlimitedはじめるか迷っ …

一枚のメモのは、どんな天才の記憶力にもかなわない 昔、誰の言葉かわかりませんが、この言葉を聞いてからメモをするようになりました。 （誰が言ったか、ネットで調べてもでてきませんでした(^^;)）

今まで数百のWebサイトを制作してきましたが、 いつも心がけていることがあります。 それは「クライアントの思いを形にする」です。

デザイナーやコーダーになって新人が最初にあたる壁が、「センスがない」「私には向いてないのではないか？」と思うことです。 大半の人は、「好き」や「やってみたい」と思ってはじめます。 しかし、大量の情報を …

CSSで一番迷うのが、ネーミングです。 初心者はクラス名を、その場その場で考えがちで、後から破綻しがちです。 頭の中でなんとなく決めていても、やはり破綻してしまいます。 更新や改修をかけていくうちに破 …

アイコンを作成するのは大変ですよね。特に大量になると、時間も手間もかかります。 そんな時に便利なのが、Googleの「Material icons」です。 下のアイコンは、すべてWebフォントです。 …

20年ほど前、ある日本人の映画プロデューサーが、予算が10億あったら、 ひとつの映画に10億使うのではなく、1作品1億の予算で10作品作ると言っていました。

WAIT! Animate アニメーションは、CSSの方がスピードも速くていいのですが、面倒なのがCSSの指定方法です。 そんな場合に簡単に、CSSアニメーションを作れるのが、「WAIT! Anima …

See the Pen Simple animating emotions. by Misha Heesakkers (@MishaHahaha) on CodePen. Simple animati …

Spring Loaders ローディングは、後回しにして、ついついありきたりなものを作りがちになってしまいます。 そんな時に、気持ちいいローダーの参考になるのが「Spring Loaders」です。

気合いで制作できた若い頃と違い、ここ数年は体調管理に気をつけるようになってきました。 おかけで、今年は風邪もひかずに皆勤しました。 体調の中で、特に気にかけているのは睡眠。 制作業に携わる人は、睡眠時 …

Bootstrap 4 Cheat Sheet レスポンシブや効率的にコーディングする場合に便利なBootstrapのチートシートです。 ソースコードとプレビューがでるので便利ですね。

長文テキストを流し込んだり、リストタグで囲む場面がよくあります。 Sublime Textで一行ごとにタグで囲む方法です。

CHARTIST.JS 普段、グラフの描画は、画像が多いかと思います。 動的にグラフを生成する場合には、結構困ることがあります。 「CHARTIST.JS」は、 SVGで描画するライブラリです。 EX …

普段生活している上で、 出勤前に「何を着て行こうか？」 昼休みになると「何を食べようか？」 など、些細な悩みは多いと思います。

帰宅途中や寝る前に、「明日これをしなければ！」と思い出すことはありませんか？

デザインやコーディング、プログラムなどは、技術があり効率化すれば、仕事が早くなります。 しかし、それだけでは、どうしても限界があります。

jMosaic 写真の高さなどを自動的にリサイズしてタイル状に並べてくれるjQuery「jMosaic」です。

FOODSHOT 料理の写真撮影は、シズル感を出すのが難しかったります。 そんな料理のハイクオリティのフリーフォトサイトが「FOODSHOT」です。 上記のようなハイクオリティで、高画質の画像が、Cr …

Mobile UI Blueprint 単色でデザインすると単調になりがちです。 そんな時に参考になる「Mobile UI Blueprint」の紹介です。

デザインやコーディング、プログラムができても、仕事ができないと評価される人がいます。

Summer UI Kit Free 明るい配色で海外のリゾートっぽい「Summer UI Kit Free」。 コーディングする前に、テンプレートであらゆるコンテンツに対応できるパターンをつくると思 …

THE COLOR THESAURUS デザイナーなら、「もっとピンクで」「淡い青で」などの注文を受けて、変更したけど「ちょっと違う」などと答えられたことは一度はあるのではないでしょうか？

Tasty CSS-animated hamburgers 最近はスマホサイトだけでなく、PCサイトにも使われるようになったハンバーガーメニュー。 そんなハンバーガーメニューの動きのサンプルを紹介した …

210 Free line icons, PSD, PNG, SVG, Icon Font. きれいに作られた、ラインアイコン。色もいいですね。

LITTLE FLYERS 「LITTLE FLYERS」は、イラストやレイアウトなど、きれいに整理され、かつ世界観のわかるサイトです。 最近見た中では、一番好きなデザインです。

ColorFavs 配色で悩むことはありませんか？ 私の場合、撮影ができない場合には、 提供された写真にあわせて配色することがあります。 そんな場合に便利なのが、「ColorFavs」です。

Is your website layout doing more damage than you think? 「変わったレイアウトを」というオーダーをいただくことがあります。 変わったレイアウトが …

Graphic Design From Around the World: Japanese Design 海外のサイトを見ていると、英語だとカッコいいなーとか、羨望の眼差しでつい見てしまうのですが、 …