デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBサイトに欠かせないUI/UXの一つローディング。この小さなアニメーションで多くのストレスが軽減でき、かつ世界観を表現できます。ローディングアニメーションには様々な作り方がありますが、今回紹介するのはCSSのみで実現するカラフルポップなローディングアニメ「CSS PIN」です。
全部で10個のローディングアニメーションが公開されており、どれもクリエイティブでポップな印象を受けます。
詳しくは以下
写真を利用する時、撮影されたまま利用するという事はソフトウェアが発達してきた現在まずありませんが、今日紹介するのはレタッチソフトでは無く、CSSで実現するイメージフェクト「20 Image Effects With CSS」です。
水彩風から、黒板に書いた風のエッジを検出したものエアブラシで書いたものなどなど、全部で20ものエフェクトがCSSで指定するだけで簡単にエフェクトを利用することが可能です。
詳しくは以下
WEBデザインの世界は非常にトレンドの流行り廃りが早く、昨年のものは今年、今年のものを来年使えないぐらいのスピードでトレンドが移り変わっていきます。今日紹介するのは来年の2017年のWEBデザインのトレンドをまとめた「The Future of Webdesign: Trends 2017」です。
来年の注目すべき、WEBデザインのトレンドが全部で6つまとめられていましたので、順に紹介したいと思います。
詳しくは以下
そろそろ街はクリスマスムードとなってきて、クリスマス装飾を見かけるようになってきました。今日紹介するのはクリスマスを彩るアイコンセット「100 Free Flat Christmas Icons」です。
このアイコンセットはフラットでカラフルな、クリスマスらしい楽しげなアイコンが全部で100種類収録されています。収録アイコンは以下からご覧ください。
詳しくは以下
アイコン素材はデザインの感覚を揃えて利用すれば、サイトの統一感、ユーザーインターフェイスの精度など向上させてくれます。今日紹介するのはまとめて利用できるレトロポップな170個収録のビジネスアイコンセット「170 Retro Business Icons」です。
上記の様なポップでレトロな温かみのあるデザインテイストでビジネスに関するアイコンが全部で170個収録されています。収録されているアイコンセットは以下からご覧ください。
詳しくは以下
WEBデザインの世界感を表現する上で便利な素材がパターン。どのようなパターンを背景に用いるのかで全く印象が異なったりします。それだけに様々な背景素材が配布されていますが、今日紹介するのは登録されたパターンをベースにカスタマイズができるパターン配布サイト「HeroPatterns」です。
決められたパターン素材をただ、取得するというものでは無く、登録されたパターンをベースに自分自身でカスタマイズして利用することが可能です。
詳しくは以下
前回「美しいmovabletypeのデザインを集めた「Movable Love」」という記事でMovabletypeの美しいデザインを集めたデザインショーケースを紹介しましたが、今回紹介するのはそのWordPress版とも呼べる「We Love WP」です。「Movable Love」と同じくWordPressのデザインに特化してデザインが収録されています。
こちらは「Movable Love」と違いかなりの数のデザインが収録されていて見応え抜群です。新規でWordPressのテーマを制作するときや、カスタマイズの参考に使えそうです。
詳しくは以下
さまざまな種類のテクスチャの中でも、グランジがかった雰囲気のあるタイプはよく利用されていて、種類豊富にストックされている方も多いと思います。今回はそんなグランジをチェック柄にかけたテクスチャセット「7 Diagonal Checkered Grunge Textures」を紹介したいと思います。
斜めに入ったダークトーンのチェックと味のあるグランジとのミックスの個性が光るテクスチャとなっています。
詳しくは以下
特に女性の方にとっては人生の一大イベントといっても過言ではない「ウェディング」、思い出を華やかに残すために、さまざまなサービスを利用される方も多いはず。そこで今回は、ウェディング関連サービスのwebサイト集「30 Adorable Wedding Websites」を紹介したいと思います。
自らのウェディングシーンを想像させる美しい写真はもちろん、フラッシュを使い動画や音楽を取り入れた華やかなサイトが多く紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
webページ構築方法の一つとして取り入れられる方も多いシングルページは、独特な見せ方や演出が話題になっています。そこで今回紹介するのが、比較的最近公開されたシングルページの中から特にユニークな作品を集めた「52 Fresh and Unique Single Page Website Designs」です。
商品の見せ方にこだわったページから、演出にこだわったページまで、さまざまなページが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ブログの作成に良く使用されるWordPressは、テーマをダウンロードするだけで手軽にブログページを生成することができるツールとして人気を集めていますが、webサイトの生成には使いづらいと考えている方もいらっしゃるかもしれません。そこで今回は、WordPressを有効的に使い作成されたwebサイトまとめ「16 Unusual Ways to Build Great WordPress Websites」を紹介いたします。
（Minicard）
1つのコンテンツだけをシンプルに見せるデザインから、情報を豊富に表示できるデザインまで、さまざまなサイトが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザイン制作に欠かすことのできないフォント。すでにパソコンに導入されているフォントではなく、ネット上などで配布されているフリーフォントを取り入れることで、豊かなデザイン再現が可能になります。そんな中今回は是非チェックしておきたい、2013年5月 最新のフリーフォントまとめ「12 New and Free Commercial Use Fonts [May,2013]」を紹介したいと思います。
新しく公開された、デザイン性の高いフォントが12種類まとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
webサイトには紙媒体とは異なる特有のデザイン感があり、その違いにデザインの難しさを感じるという方も多いのではないでしょうか？そんな中今回紹介するのは、雑誌や広告のデザインレイアウトを取り入れたwebデザインをまとめた「Printed Web: Print Design Inspired Websites」です。
（Roald Dahl – The Official Web Site）
ファッション誌や看板・新聞など、さまざまなプリント広告のデザイン感を取り入れたwebサイトがたくさん紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
特定の絵柄を敷き詰めていくことができるパターン。デザインを作りこんでいく上で、簡単に質感を高めたりディテールを高めたりすることができます。今日紹介するのは制作に便利な、photoshop、illustratorパターン集「50 Tileable and Seamless Pattern Sets (500+ Patterns)」というエントリー。
Seamless Paper Patterns – 6 Patterns (Photoshop & JPG)
photoshop、illustratorと制作には欠かせないソフトで利用出来るパターンが集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
Designdevelopでもデザインをしていく上で欠かせないものとしてストックフォト、写真素材のサイトは多々紹介してきましたが、今日紹介するのは四季を彩る花や空などを中心とした写真素材が500枚以上、公開、配布している「オガワナオキのフリー写真素材集」です。
写真の解像度は、写真にもよりますが、XGA（1024×768）以上はあるみたいで、印刷には少々厳しいかも知れませんが、WEBで使う分にはなんら問題がないサイズで公開されています。
詳しくは以下
今まで「システムアイコンからアプリアイコンまで170のアイコンを収録したアイコンセット「170 dock icons」」や「可愛らしいフリーアイコンセット集「26 Free Icon Sets We Love」」などと様々なアイコンセットを紹介してきましたが、今日紹介する「DelliPack 1.0&2.0」は立体感があり、クオリティの高いフリーアイコンセットです。
パレット、金庫、建物、黒板からなどの少し特徴的な物から、人物、更新アイコンなど標準的なものまで、バリエーション豊かなアイコンが収録されています。
詳しくは以下
DelliPack 1.0
DelliPack 2.0
二つのファイルともにzipファイルで配布されていて、ファイル形式はPNGでサイズは256, 128, 64, 48, 32 and 16 pixelsの6種類が用意されています。またDelliPack 1.0の方は「Smashing Magazine」でPSDファイルも公開されていますのでアイコン制作の勉強用にも良さそうです。
自由にダウンロードでき、アイコンは再配布、販売を除いて、商用、非商用問わずどんな規制も受ける事無く、自由に利用する事が出来ます。
