デザインを開発するという視点でお伝えするクリエイティブBLOG
コンテンツがいくら面白くても、サイト内にシェアボタンが無いことで拡散の機会を失っていたら、本当にもったいないことですよね。今回紹介するのは、 WordPressでスタイリッシュなSNSボタンを設置できるプラグイン「13 Effective WordPress Plugin to Lift Up Your Sharing Rate」です。
シェア率を高めるために効果的なWordPressプラグイン集です。中でも気になったものをいくつかピックアップしてみました。
詳しくは以下
WEBデザインならではのエフェクトは、私たちの目を楽しませてくれたり、あっと驚かせてくれたりします。今回ご紹介する「WebGL Distortion Hover Effects | Codrops」は、WEBの中でもよく目にするホバーアクションのエフェクト集になります。
歪みの効果を与え、滑らかに動くスタイリッシュなホバーアクションです。
詳しくは以下
デザイナーにとってテンプレート・モックアップは非常にありがたい存在。デザイナー以外でもディレクションに関わる人であれば完成イメージとして、これらを使用する機会もあるのではないでしょうか。そんな人たちにおすすめできるまとめ「30 Fresh Freebies for Web & Graphic Designers」を今回はご紹介していきます。
Mobile Chat App Design – free download by Claudio Parisi – Dribbble
トレンド感のあるシンプルかつフラットなデザインで表現された完成度の高いテンプレート・モックアップ。下記にいくつかピックアップしているので、チェックしてみてください。
詳しく見る
背景を透過することができたり、フルカラーで保存すれば劣化が少ないなどのメリットがあるPNG画像。WEBデザインに使用する機会も多いものですが、フルカラー保存となると、画像サイズが大きくなってしまって困ることも少なくありません。そんなときに役立つ「UPNG」を今回はご紹介していきます。
簡単な操作でソフトのダウンロードも不要。便利なオンラインの圧縮サイトになります。
詳しくは以下
WEBサイトの機能として欠かせない存在になりつつ在るモーダルウィンドウ。ギャラリーを閲覧させたり、商品詳細を表示させたり非常に便利な仕組みです。今回ご紹介するのはそんなモーダルウィンドウを制作する際に役立つ、フリーのモーダルウィンドウをまとめた「12 Free Modal Window Libraries & Plugins For Your Site」です。
シンプルなタイプから、ちょっと凝った機能を搭載した応用的なものまで、様々なモーダルウィンドウが12点紹介されています。更にその中から、おすすめのものを3点ピックアップしてみましたので、以下よりご覧ください。
詳しくは以下
(さらに…)
WEBやアプリ上でのボタンはユーザーにとって大きな意味を持ち、非常に重要な要素。一目でボタンだとわかるようなつくりであることはもちろんのこと、遊び心あるエフェクトはユーザーの目を楽しませます。今回はそういったボタンを探している方におすすめ、最新CSS3ボタンのまとめ「50 CSS3 Button Tutorials For Designers [2017]」をご紹介します。
すべてにデモがついているので、その場でどんな動きをするのかを確認することが可能。50種類もあるボタンの中でも気になったものをいくつかピックアップしていますので、下記よりご覧下さい。
詳しくは以下
デザイン制作の際になかなか気に入ったフォントが見つからず、特に予算がない時には、無料のデザインフォントを探すことも多いはず。そんな時に役立つ、プロのデザイン制作にも使いやすいデザイン性の高いサンセリフフォントをまとめた「10 Beautiful and Free Humanist Sans Serif Fonts」を紹介したいと思います。
Huerta Tipográfica | Download Telex ht
アルファベット一つ一つの美しさを感じられるサンセリフフォントが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
アイコンやテクスチャ、psd形式、SVG形式など、素材にはいろいろな形式や種類が存在していますが、中でもベクター形式の素材は、いろいろな加工を施したり形や色を変えることが容易なため、とても重宝する素材だと思います。そんな中今回は、ロゴ制作やパーツ素材として利用できる、チョーク風手描きテキストなフリーベクターセット「Free download: Chalk vector elements」を紹介します。
チョークを使って描いたような、ラフなテイストのベクター素材がたくさんセットになっています。
詳しくは以下
会員登録などをすると送られてくることの多いニュースレターですが、文字ばかりのものより、デザインされたニュースレターの方に目に留まることも多いのではないでしょうか？そこで今回紹介するのが、手軽にデザイン性の高いニュースレターを作成できるフォーマットを集めた「Simple Steps in Designing an Email Newsletter」です。
Marketing – Artistic Store HTML Email Template (4 Themes) – ThemeForest
商品販売向けのデザインから、コラムを読みやすくレイアウトしたデザインまで、さまざまなニュースレターフォーマットが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインのポイントとして多いに活躍してくれるアイコンは、いくつあっても嬉しいものです。そこで今回紹介するは、ハイクオリティな最新のアイコンを集めた「50 New Free High Quality Icons Sets」です。
（IsoIcons – Workspace | Artdesigner.lv）
非常にクオリティの高い多彩な種類のアイコンが集められています。中でも気になったアイコンセットをいくつかピックアップしましたので、下記よりご覧ください。
カラーペンキや、絵の具などを利用した自然な塗りの雰囲気をPhotoshopで表現する際に便利なPhotoshopブラシをまとめた「45 Free Watercolor, Ink And Splatters Brushes For Photoshop」を今回は紹介したいと思います。
Watercolor Splatters by =pstutorialsws on deviantART
筆で塗り重ねたようなデザインが表現できるブラシから、絵の具が飛び散ったような雰囲気を再現できるブラシまで、さまざまなPhotoshopブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
CSSでメニューもはやWEBデザインの定番の一つになってきましたが、CSSでメニューと一口に言っても、様々な使い方、作り方があります。そこで今回紹介する「7 Advanced CSS Menu, A Great Roundup!!」は様々な実用性の高いCSSで作られたメニューを集めたエントリーです。
画像は 8 web menus you can’t miss
画像をふんだんに使った物から、ぼかし等を効果的に使ったもの、シンプルなツリー型と幅広く様々なジャンルのCSSでデザインされたメニューが7つ厳選されて集められています。
詳しくは以下
今までDesigndevelopでは様々なフリーフォントを紹介してきましたが、今回紹介するのは比較的最近リリースされたハイクオリティなフォントを紹介しているエントリー「40 Fresh High-Quality Free Fonts For Your Designs」です。
最近リリースされたものが多いため、あまり見かけないフォントが数多く紹介されています。今日はその中でも気になったものをいくつか紹介したいと思います。
詳しくは以下
デザインに流行があるように、デザイン制作に必要なイラストやフォント・アイコンにも、その時々で流行があり、それぞれの時代を思い出させてくれる重要なアイテム。そこで今回紹介するのが、レトロテイストなデザインに使いやすいフォントばかりを集めた「Collection Of Free Retro Fonts For Your Vintage Designs」です。
（Matchbook Typefaces | One by Four）
タイプライターをモチーフにしたフォントや、以前に流行した映画のロゴを思い出させるようなフォントまで、さまざまな時代を感じられるフォントばかりが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
使いやすさや分かりやすさが重要なWebサイトはデザインだけではなく、一つひとつのアクションにもこだわって作られています。そんな中今回は、ユニークなアニメーションアンダーライン「10 Unique Animated Underline Text Effects with CSS」を紹介したいと思います。
アンダーラインといってもその種類は様々。さまざまなアニメーションパターンがまとめられています。いくつか紹介されている中から気になったものをピックアップしてみました。
詳しくは以下
WEBではインターフェース的にもデザイン的にも欠かすことができない、マウスオーバーした時のホバー処理。ちょっとしたギミックですが、全体のクオリティに影響する部分だと思います。今日紹介するのはわずか2.5KBと非常に軽量ながら、様々なホバー表現を可能にしてくれるjQueryプラグイン「Hoverizr」。
このプラグインではcanvasを利用して、白黒からカラーだったり、ぼかしからぼかしを取ったりと通常のホバー表現とは一味違った表現を簡単に可能にしてくれます。
詳しくは以下
