デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBデザインならではのエフェクトは、私たちの目を楽しませてくれたり、あっと驚かせてくれたりします。今回ご紹介する「WebGL Distortion Hover Effects | Codrops」は、WEBの中でもよく目にするホバーアクションのエフェクト集になります。
歪みの効果を与え、滑らかに動くスタイリッシュなホバーアクションです。
詳しくは以下
毎日コーディングでさまざまなコードを書くデベロッパーにとって非常に便利なスニペット。知っているだけで作業効率が格段にアップするもの。そんな方におすすめできる「30 Seconds of CSS」をご紹介していきたいと思います。
先進的な知識を多く取り込むためにも、基礎的な業務内容をいかに短縮して行っていけるかは非常に重要なポイント。デベロッパーの方はぜひ下記よりチェックしてみてください。
詳しくは以下
モダンな雰囲気からスタイリッシュな雰囲気まで、幅広い演出をしてくれるハーフトーン。今まで画像としてWebサイトに取り込むことが多かったのではないでしょうか。今回ご紹介する「Pure CSS Halftone Effect」ではWebならではの動きを楽しむことができるエフェクトを通したハーフトーンになります。
美しい動きで視線を惹き付ける、ぜひ取り入れてみたいエフェクトとなっています。
詳しくは以下
他の世界に入り込むような没頭感を味わうことができるVR。気軽にデモを作成ができたらと、デベロッパーであれば1度は感じたことがあるかもしれません。そんな中今回紹介するのは、CSSで作るVR「CSSVR: Progressive VR experiences」です。
VRの複雑な動きをどう再現していくのか、その再現率の高さはどうれくらいなのか。デベロッパーであれば気になるところ。下記にデモを載せているのでご覧ください。
詳しくは以下
Webデザインの中でもユーザーの目を簡単に引くことを可能にするエフェクト。動きがつくだけでサイト内がぱっと華やかになります。今や様々なエフェクトをつけることが可能ですが、ついついワンパターン化してしまいがち。そんな方におすすめできる、水のような動きに焦点をあてた「Liquid Distortion Effects」を今回はご紹介致します。
水のような動きは優雅さと洗練された雰囲気を与えてくれます。下記にデモをいくつかピックアップ致しましたので、ご覧ください。
詳しくは以下
予約フォームや等で、weｂサイトで日付の選択を行う機会は意外に多いもの。だからこそ、ユーザーの使いやすさを意識したUIの工夫が必要となってきます。そんな中、今回ご紹介する「10 Free Open Source Date Picker Plugins」は、日付選択のプラグインが集められたまとめです。
使いやすさや、見やすいデザインが考慮された日付ピッカーのプラグインがまとめられています。
詳しくは以下
グラフィックデザイナーであればまず間違いなく毎日のように使うソフトウェア「illustrator」。非常に多機能で、レイアウトだけではなく、様々な表現が可能ですが、今回紹介するのはイラストレーターで描くアイコンチュートリアルを集めたエントリー「55 Adobe Illustrator Icon Design Tutorials」です。
How to Create a Yellow Submarine Icon with Gradient Meshes
立体的なものからステッカーのようなもの非常にリアルなものと様々な表現のイラストレーターによるアイコンの作り方がまとめられています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
Webサイト内でよく見かけるアイコンですが、みなさんはどのように制作しているでしょうか。IllustratorやPhotoshopを使い、JPEGやPNG形式で保存している方も多いかと思いますが、今回紹介するのは、CSSとSVGで作るアイコンセット「Let’s make multi-colored icons」です。
SVGのメリットを活用したアイコンの生成方法が分かりやすく解説されています。
詳しくは以下
無料のベクター素材は沢山ありますが、その中で品質の良いものを探すには、どうしても時間がかかってしまうもの。そこで今回は、様々なトーンで制作された高品質の無料ベクター素材が30種まとめられた「30 Free Vector Graphics and Vector Elements」ご紹介します。
イラストやロゴ、UI設計に使えるアイコンなど、WEBデザインにも印刷物のデザインにも自由に使用できます。気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
webデザインでも紙媒体のデザインでも、背景素材として活用できるテクスチャは活用頻度も実用性も高い、とても便利な存在です。そこで今回紹介するのは、デザイン制作に欠かせないフリーテクスチャまとめ「350+ Free Textures」です。
（+ Textures – Wood. by ~YouAreLikeADoll on deviantART）
デザインを引き立ててくれる素材感溢れるテクスチャから、ポイント使いとして大いに活躍を果たしてくれそうなタイプまで種類がかなり豊富です。その中から今回いくつが気になったものを選出しましたので、以下よりご覧ください。
詳しくは以下
イラストレーターで背景等を制作する際に便利なパターン。一度制作しておけば、どんな大きさにも対応でき、目の粗さ等も柔軟に対応できる優れものです。今回紹介するのはそんなイラストレーターのチェックパターンをあつめたエントリー「20 Seamless Plaid Patterns for Illustrator」を紹介したいと思います。
すべてチェックのパターンになりますが、様々なパターンが公開されています。今日は公開されているものの中から気になったものをいくつか公開したいと思います。
詳しくは以下
シャープな感じがする明朝体のフリーフォント「花園フォント」。こちらのフォントは、JIS X 0208:1997の6,355漢字＋1非漢字「仝」の6,356字が収録された漢字のみのフリーフォントです。仮名が無いのでボディコピーなどには使えませんが、メインで漢字を大きく扱うデザインなんかには使えそうな漢字のフォントだと思います。
こちらの制作にはビットマップ形式やアウトライン形式ではなく、スケルトン＋肉付け形式でデータで記述する漢字グリフ（フォント）自動生成エンジンのKAGEシステムを使って作られたと言うものです。
詳しくは以下
モダンな雰囲気からスタイリッシュな雰囲気まで、幅広い演出をしてくれるハーフトーン。今まで画像としてWebサイトに取り込むことが多かったのではないでしょうか。今回ご紹介する「Pure CSS Halftone Effect」ではWebならではの動きを楽しむことができるエフェクトを通したハーフトーンになります。
美しい動きで視線を惹き付ける、ぜひ取り入れてみたいエフェクトとなっています。
詳しくは以下
デザインソフトだけでは表現することが案外難しいゴールド色ですが、高級感溢れるデザインを制作する際には、ゴールドを基調とした配色を求められることも多いのではないでしょうか？そこで今回紹介するのが、さまざまな金色を表現できるテクスチャまとめ「20 HandPicked Gold Texture Packs」です。
（Texture 71 : Gold by ~WanderingSoul-Stox on deviantART）
自然の色味が美しいテクスチャから、金箔のようなリアルな色味が特徴的なテクスチャまで、質感の異なるテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
音楽だけではなく、感情や楽しさ等、それに付随する印象を与える事ができるモチーフ音符。一般的なスタンダードな素材ながら、自分で描くとなると結構面倒だったりします。今日紹介するのはそんな音符関連のフリーベクターデータ「Music Notes Vector」です。
ト音記号から、音符もそれぞれ4部音符、8部音符、休符まで一式揃っています。そのままでも、加工しても使えるシンプルで素材としては持っておくとかなり便利なデータだと思います。
詳しくは以下
人々が暮らす都市の風景はデザインに取り入れられることも多く、イラストやシルエットなどの素材ををチェックしている方も多いのではないでしょうか？そんな中今回紹介するのが、都市を表現できるPhotoshopブラシをまとめた「24 Sets Of Free City Brushes For Photoshop」です。
City Scapes 2 – NYC Edition by ~tiffcali06 on deviantART
シルエット素材からイラスト、画像など、表現力の広がるPhotoshopブラシが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
