デザインを開発するという視点でお伝えするクリエイティブBLOG
webサイトのデザインをクライアントに提案する時には、PCだけでなくスマートフォンや他の端末ではどのように表示されるか、全て見せるということも少なくないもの。そんな時に役に立つのが今回紹介する、レスポンシブした際のスクリーンショットが一度に撮れるサイト「Responsive Screenshots」です。
URLを入力するだけで、一度に複数の端末のスクリーンショットうを撮ってくれる優れもの。デザイナー必見のサイトです。
詳しくは以下
現代のWebデザインに置いて欠かせない基礎設計となっている、レスポンシブレイアウト。PCとスマートフォンでの見え方の違いを手軽にチェックしたい、そんな時の手助けとなる便利なテストツールをまとめた「7 Free Tools For Testing Responsive Layouts」を今回は紹介したいと思います。
7 Free Tools For Testing Responsive Layouts | Webdesigner Depot
使いやすい全てフリーで利用できるツールが7種ご紹介されています。その中から幾つかおすすめのツールをピックアップしてまとめましたので、是非ご覧ください。
詳しくは以下
(さらに…)
今やweｂサイト設計は、レスポンシブであることが当たり前の時代となりましたが、最適な構成・設計を生み出すことに日々、頭を悩ませる方も多いのではないでしょうか。そんなときに便利な「Launchaco」を今回は紹介いたします。
簡単な手順を踏むだけでレスポンシブ設計された状態のデータがダウンロードできる、web制作現場にいる方にとっては嬉しいwebツールです。
詳しくは以下
キャンプ・アウトドアなどは、国内でもグランピングという新しい概念もでてきて、さらに注目を浴びているレジャーの一つですが、今回紹介するのはキャンプ・アウトドアをイメージしたアイコンセット「Camping Free Line Icon Set」です。
方位磁石、リュック、オノやマッチなどなど、通常のWEB制作のアイコンセットには無いユニークなアイコンが集められています。
詳しくは以下
デザインやインターフェイスを作りこむ上で重要なアイコン。シンプルなアイコンはどんなデザインにもマッチし制作現場においては非常に重宝します。今回紹介するのはミニマルでベクターで扱えるフリーアイコンセット「1800 Free Minimal Icons」です。
制作にかなり配慮して制作されたアイコンセットのようで、普通のアイコンセットには無い細かい配慮がなされた上で配布されています。
詳しくは以下
スマートフォンやタブレットにサイトを最適化させることは、もはや必須といっても過言ではない現在のweb業界。レスポンシブ設計のテーマも多数フリー配布されています。今回はそんなフリーレスポンシブpsdテンプレート集「12 New Free Responsive PSD Website Templates」を紹介したいと思います。
Freebie | Breviter – creative blog PSD template | DesignHooks
12種という厳選された数ではありますが、最新の主流デザインが反映された魅力的なものばかりがそろっています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
Photoshopのブラシは、写真やオブジェクトの見た目を簡単に変えることができるツール。できればより多くストックしておいて、デザインの幅を広げておきたいもの。そんな中今回紹介するのは、写真に手軽にスクラッチされたようなニュアンスを加えることができるブラシライブラリのまとめ「A Collection Of Free Scratch Brushes For Photoshop」です。
Scratches by ~Smirnoff-Sweetie on deviantART
金属に刻まれた細かな傷や鋭いもので引っ掻いたような傷など、さまざまなスクラッチブラシがまとめられています。中でも気になったものをピックアップしたので、下記よりご覧ください。
詳しくは以下
グリッドラインを活かしレイアウトされたwebデザイン、すでに定番の形となりさまざまなシーンで展開されていますが、そんな中今回はグリッドレイアウトのwebデザイン集「40+ Great Examples of Grid Style in Web design」を紹介したいと思います。
TasteSpotting | a community driven visual potluck
定番のものから、デザイン性を重視しさらに個性を強調したタイプなど、同じグリッドレイアウトの中でにいろんなタイプのデザインが紹介されています。気になったサイトを以下にまとめてみました。
フォントにはさまざまな種類がありますが、中でも筆記体タイプのスクリプトフォントは、洗練された雰囲気を手軽に表現することができます。今回はそんなスクリプトフォント「Samantha Script Font」を紹介したいと思います。
リボンのようになめらかにカーブを描く、しなやか、かつ柔らかな質感が印象的。どこかアンティークな世界観も感じられるデザインフォントとなっています。
詳しくは以下
IllustratorやPhotoshopといったデザイン制作に必要なソフトは、ユーザーそれぞれが使いやすいようにカスタマイズできるというのも魅力の一つ。今回は、Illustrator表現力をアップさせられるブラシセット「30 High Quality Brush Packs for Illustrator」がまとめられていましたので、紹介したいと思います。
Urban Squares brushes by ~photosoma on deviantART
今までにないペンの質感を表現できるブラシセットから、イラストのようなブラシまで、さまざまなIllustratorブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
販売されている衣服などに付いているプライス表示用のタグは、デザインの世界でもパーツ素材として広く愛用されています。ベースがシンプルゆえ、バリエーションが豊富なのも、愛用され続ける要素の一つではないでしょうか？そんな中今回紹介するのは、22種類のタグデザインpsd素材をまとめた「22 Free and Attractive Price,Sale,Discount Tag PSD Files」です。
立体的なタイプを中心に、さまざまなテイストのタグデザイン素材が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
自分自身を表現するシーンで自分の分身となるアバター。様々なタイプのアバターが世の中には溢れていますが、今回紹介するのはベクターデータで配布されている、かわいいアイコンセット「Autumn Kawaii Icon Set (50 Icons, SVG & PNG)」です。
このアイコンセットは全部で50種類ものアイコンがセットとなっており、雲や紅葉、りんごなど秋を感じるアイコンがセットになっています。
詳しくは以下
デザイン制作、画像合成など、さまざまな場面で利用されるテクスチャは、できるかぎりバリエーション豊富にストックしておきたいもの。そこで今回紹介するのが、インスピレーションの広がるテクスチャをまとめた「Various Textures That You Might Find Interesting – 38 Items」です。
（Nebulous by `pendlestock on deviantART）
実写の風景からクリエイター制作によるテクスチャまで、さまざまなテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBデザインをしていて普通の素材では、デザインに凝ってくるとなかなか、コレだと言うものに出会えなかったり、近いものを使っても浮いてしまったり、どうしても難しい部分があります。そこで今回紹介する「Vector Graphics for Web Design – Hidden Pixels」はWEBデザインで使えるベクターデータを集めたエントリー。
ベクターデータなので、色や形、大きさなど、制作しているページに併せて制作することができます。定番のものや既にdesigndevelopで紹介したものも中にはありますが、アイコンやバッジ、バナー台の他、グラフィックまでとWEBで使えるベクターデータが集められています。今日は多々紹介されているものの中から気になったものをピックアップして紹介したいと思います。
詳しくは以下
webサイトからのお問い合わせなどにフォームを設置しますが、スマートフォンライクの時代となった今、従来のデザインをそのまま取り入れるとタテに長くなってしまう傾向が。そんな状況を解消できる、フローティングラベルを取り入れたフォームサンプルまとめ「9 Floating Form Label jQuery & JavaScript Plugins」を今回は紹介します。
GitHub – Baedda/floating-form-labels: jQuery plugin that makes inline form labels usable again.
プレースホルダの文字が、入力するとタイトルとして浮き出すので、フォーム上に常に配置する必要がなく、長さを軽減することができるサンプルがピックアップされています。
詳しくは以下
