デザインを開発するという視点でお伝えするクリエイティブBLOG
webサイト制作にいまやなくてはならない存在になっているSVGアニメーション。デザインする際に活用されている方も多いかと思います。今回はそんな方におすすめのSVGアニメーションを配布するサイト「unDraw」を紹介したいと思います。
既存のイラストをベースに好きな色にカラーチェンジができる、嬉しい機能が搭載されたイラストサイトとなっています。
詳しくは以下
シンプルで機能的なフラットデザインは、場面を選ばずどんなシーンにも合わせやすい優れもの。今やWeb制作には欠かせない、デザイン手法の一つではないでしょうか。今回ご紹介するのは、そんなフラットデザインを手軽に取り入れる事ができる、商用フリーのフラットデザイン素材をまとめた「35 Free Flat Graphics and Web Elements for Designers」です。
Weather – Daily UI #037 – Freebie by Roman Bova – Dribbble
情報をすっきりと分かりやすく見せてくれる、魅力的なフラットデザインが35点もまとめられています。今回はその中から、おすすめしたい素材を幾つかピックアップしましたので、以下よりご覧ください。
詳しくは以下
(さらに…)
デザインされたグラフィックに合うフォント探しは、ほとんどの制作シーンで行うと思いますが、時にフォントを主役にしたデザインを手がけることもあるはず。今回はそんな時におすすめ、芸術性の高いフリーフォント11種まとめ「11 Awesome Free Artistic Fonts」を紹介したいと思います。
Hipster Viral Blackletter Font #freebie on Behance
11種という厳選された種類ですが、どれも魅力的なタイプばかり。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
Webデザインに欠かせない様々なエフェクトやアニメーション。使い方次第でWebサイトを魅力的なものに仕上げてくれますが、今回紹介するのは、クリエイティブなマウスオーバーアニメーション「Stack Motion Hover Effects」です。
全部で30種類の立体的なマウスオーバーアニメーションがサンプルとして上がっており、サイトの雰囲気や印象に併せて選択することが可能です。
詳しくは以下
最近は様々なライブラリが展開されていて、WEBの開発にも大きな影響を与えていますが、今日紹介する「Coda Slider Effect」もそんなライブラリの一つjQueryを使ったタブメニュー+エフェクトです。
「Coda Slider Effect」は非常に滑らかに動くスライダーエフェクトを実現するためのもので、上記のようなよく見るタブメニューにひと味違った動きを付加させてくれます。
詳しくは以下
WEBを制作する際にphotoshopで制作しているひとには便利なpsdテンプレート。パーツを参考にしたり、全体のベースとしたり様々な使い方がありますが、今日紹介するのはクリエイティブで、プロフェッショナルなWEBレイアウトPSDファイルをまとめたエントリー「40 Professional and Detailed Web Layout PSD Templates」です。
Free Professional PSD Template: BlueMasters – Smashing Magazine
様々なテイストのpsdファイルがまとめられていますが、今日はその中から気になったテンプレートをピックアップして紹介したいと思います。
詳しくは以下
関連記事の表示はSEO的にも効果を発揮するし、読者にとっても有益なリンクだと思います。今回紹介する「Related Posts Link」は手動で関連記事を記事に差し込む事ができるWordPressプラグイン「Related Posts Link」です。
1. 配布元の「erwin@terong » WP Plugin: Related Posts Link」より terong_related.phps を保存し、terong_related.php にリネーム。
2.[terong_related.php]を「wp-content/plugins/」アップロード
3.Related Posts Linkのプラグインを有効化。
1. 記事投稿画面から関連付けを行いますが、新規投稿時には何も表示されません。関連記事を挿入する為には一旦記事を保存する必要があります。
2. 保存済み記事の記事投稿画面では、下記の画像のようにウィンドウの右上端に「Related Links」の項目が表示されます。
※「Related Links」をクリックすると保存時の状態に戻ってしまうため、追加編集したら必ず保存してから「「Related Links」」をクリックしてください。
3. 「 Related Links」をクリックすると、下記の画像のような実際に関連付けを行う別画面で開きます。
※リストは投稿ステータスが「公開」の記事のみ。公開ステータスのパスワード付き記事はリストアップされますが、草稿・非公開の記事および「ページ」はリストアップされません。
4. 関連付けたい記事にチェックを入れ、[Update]ボタンをクリック、[Close this Window]をクリック。これで関連記事が表示されているはずです。
自動で関連記事を表示してくれるプラグインもありますが、DesignDevelopでは精度を上げる為に手動で関連記事を挿入する方法をとりました。膨大に記事を書いている方やジャンルが多岐にわたる方はタグによる関連記事の自動表示とかの方が良いかもしれません。
デザインに質感を出したいのに、何か物足りない・・と感じている時になどにも最適な、レンガのテクスチャセット「36 Collections of Free Wall Brick Textures」を今回は紹介したいと思います。
（http://www.imageabstraction.com/gallery/pic.php?id=29）
シンプルなものから、長い時を経て味のある雰囲気を醸し出しているものなど、さまざまな種類のレンガテクスチャが紹介されています。中でも気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
■Free Texture – brick, grunge, paint, peeling, spray, wall
ペンキでペンディングが施されたレンガ。鮮やかな色合いが特徴です。
■Free Texture – algae, brick, concrete, grunge, moss, wall
苔が生え、グリーンに覆われたレンガ。強いコントラストの色合いなどが生きた、とても美しいテクスチャですね。
■Free brick wall texture pack | High Resolution Textures
シンプルなレンガのテクスチャセット。定番として利用できそうです。
背景素材として、デザインのパーツ制作の一部として、いろんなシーンで活躍してくれそうですね。種類が豊富などの嬉しい。気になる方は下記リンクにてこの他にもたくさん紹介されていますので、チェックしてみてください。
webサイトを制作する際に頻繁に使用するアイコンですが、一からデザインするには大変な手間と時間がかかってしまうと思います。そこで今回紹介するのは、手書き感とユーモアで親しみやすさを感じるアイコンセット「Steedicons」です。
手書きの素朴な雰囲気の中に、細部へのこだわりを感じるアイコンが数多く展開。300以上のアイコンセット［29ドル］の他に、フリーで利用できるアイコンも一部公開されています。
詳しくは以下
日々進化するスマートフォン・タブレット等のアプリケーション。時代が移り変わると共に、デザイン性もどんどんと変化しつつあり、流行を取り入れたインターフェイス設計が非常に重要視されます。今回はそんなシーンに活用したい、on/off スイッチデザイン集「20 Elegant User Interface Switch Designs」です。
（Dribbble – Drill: On by Mohanad Yajouri）
リアルなスイッチが多数まとめられており、デザインのクオリティを高めることができそうです。気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
Designdevelopでは今まで様々なCSSテクニックをお伝えしてきましたが、今日紹介する「22 CSS Button Styling Tutorials and Techniques」はボタンのデザインに特化したテクニック集です。
Beautiful CSS buttons with icon set
立体的なボタンから、角丸はもちろん影がついたものなどなどCSSで作る手のこんだボタンのテップスやチュートリアルが収録されています。今日はその中からいくつかピックアップして紹介したいと思います。
詳しくは以下
現在「DesignDevelop」はWordPress2.3で動いています。WordPress2.2系からの大きなの変更点の一つにタグの標準化と言う物があります。いままでのWordPressはタグ標準では動作せずタグプラグインに頼っていましたが、今回リリースされたWordPress2.3からは本体に実装されています。
しかしこのタグ機能、細部までいじくれるわけではなく本当に最低限の機能しか持っていません。そこで今回はちょっと頼りないWordPress2.3のタグ機能を補ってくれるプラグイン「Advanced Tag Entry」を紹介したいと思います。
こちらのプラグインを使えば上記のような投稿編集画面でドロップダウンリストからタグの追加削除、タグの新規作成/編集、データベースからの未使用タグの削除、スラッグの編集ができる用になりタグの管理に非常に力を発揮してくれます。
インストール方法は以下から
(さらに…)
