Archives : January 2016

- 13 Articles -

バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました

Read Article

バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました

バナーデザインは決められた領域内でどれだけユーザーやターゲットの目にとまるようなデザインにできるかが重要になってきます。デザイン制作したことあるなら一度は経験したことあると思いますが、領域が決められているけどその中でしっかり伝えたい内容を目立たせる必要があるので、何度もレイアウトを調整したり、結局時間をかけて完成してもいまいちな出来になってしまったりなんてことも...。そこで今回は、バナーデザイン…

  • Inspiration
バレンタインにピッタリのキュートなデザインアイコンセット 10

Read Article

バレンタインにピッタリのキュートなデザインアイコンセット 10

バレンタインをテーマにした可愛らしいデザインアイコンセットのまとめです。去年に引き続き、やはり今年もデザイン内にハートを上手く取り入れているものを多く見かけます。そのままデザイン素材として個人・商用問わず使えるものもありますが、これらのデザインからインスピレーションをもらって自身のデザイン制作時の参考にするのもいいですね。

  • Material
data属性を利用したナビゲーションの実装サンプル

Read Article

data属性を利用したナビゲーションの実装サンプル

テキストのみで作られたようなシンプルなナビゲーションに`data`属性を利用したカスタマイズを施した実装サンプルです。いずれもカスタマイズといっても簡易的なものばかりで、ほぼホバー時の動きにはなりますが、紹介しているような方法を使うことでHTMLに記述する要素を少し減らすことができたり、ちょっとしたアニメーションを加えたりすることもできます。また、あまり`data`属性を使ったことがないという人は…

  • Tips
CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10

Read Article

CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10

画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。

  • Tips
jQuery:画像や要素をランダム出力する方法の備忘録

Read Article

jQuery:画像や要素をランダム出力する方法の備忘録

jQueryを使って画像や要素などをランダムに並べ替えたり表示させたりする方法の備忘録です。jQueryと言っても乱数を作るのに必要なわけではないですし、特に前半の方などは簡易的なもので尚更JavaScriptだけでできるじゃんって感じがしますが、やっぱり何かと楽に実装できるので使っているだけです...。

  • Tips
CSSの:nth-childと:nth-last-child擬似クラスの使用例

Read Article

CSSの:nth-childと:nth-last-child擬似クラスの使用例

今更な内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。CSSの擬似クラスにある`:nth-child`と`:nth-last-child`の使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。

  • Tips
CSSで実装するグローデザインのボタン

Read Article

CSSで実装するグローデザインのボタン

少し発光しているような感じに見えるグロー(グローイング)デザインを適用したボタンのサンプルです。このデザイン自体は以前からあったと思うのですが、最近DribbbleやBehanceといったデザインのインスピレーションサイトだったり、綺麗なUIデザインを紹介しているようなサイトでよく見かける感じがして、配置や組み合わせももちろん関係はあると思いますが、見た目が綺麗なものやかっこ良いと思うものが多かっ…

  • Tips
背景にひと手間加えたい時に便利なスクリプト 10+

Read Article

背景にひと手間加えたい時に便利なスクリプト 10+

ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」という時に便利そうだと思うスクリプトを幾つかまとめてみました。jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。

  • Tips
商用利用も可能なロゴデザインを公開・配付している「Weekly Free Logo Designs For Your Business」

Read Article

商用利用も可能なロゴデザインを公開・配付している「Weekly Free Logo Designs For Your Business」

おそらく実際に使わせてもらうことはないと思いますが、インスピレーションもらえそうだし覚えてはおきたかったので備忘録兼ねてご紹介します。「Weekly Free Logo Designs For Your Business」は個人・商用問わず利用することができるロゴデザインを公開・配布しているサイトで、いずれもシンプルなデザインになっています。

  • Material
最近気になったハイクオリティなUIキット #15

Read Article

最近気になったハイクオリティなUIキット #15

ここ最近気になったUIキットのまとめです。見た目や各パーツ・カラーの組み合わせ方などデザインの参考にするだけでなく、それぞれ実際に作成されたファイルをダウンロードすることもできるので、どのようなレイヤースタイルで作られているかを参考にしたり、ライセンスが問題なければデザインで利用させてもらうこともできます。今回は少し前に発表されたPantone Colorにインスピレーションを受けて作成されたもの…

  • Material

Close the search window,
please press close button or esc key.