デザインを開発するという視点でお伝えするクリエイティブBLOG
Webサイト閲覧中によく見かけるプログレスバーですが、最近は動きや形も様々で遊び心のあるものも増えてきています。そんな中今回は、プログラマーにとって便利なプログレスバーのJavaScript Plugins「 9 Free Progress Bar JavaScript Plugins For Web Designers」の紹介したいと思います。
Animated Goal Progress Bar jQuery plugin
ベーシックなものから、ちょっと変わったものまで9種類のプログレスバーがピックアップされています。
詳しくは以下
デザインをする上でインパクトのあるものを仕上げるためには、フォントや装飾アイテムがポイント。イメージにあった素材をうまく選定する必要があります。そんな時に参考にしたい、個性的な印象でインパクトを与えるタイポ&ベクターセット「Pool Riders Typeface + Bonus Vector Cut-Outs」を紹介したいと思います。
タイポとベクター素材がセットになった使い勝手のよいアイテムです。
詳しくは以下
デザインの良し悪しの決め手ともなるフォント選び。デザイナーにとって重要なアイテムとなるので、様々なジャンルに対応できる最新のフリーフォントは必見です。そんな中今回紹介するのは、グラフィックデザイナーのためのおしゃれなフリーフォント「21 Fresh Free Fonts for Graphic Designers」です。
MINDFULLY – FREE CALLIGRAPHY FONT — Pixel Surplus | Resources For Designers
柔らかな印象を与えてくれる手書きフォントから、スタイリッシュに決まるものまで、21種類のフリーフォントを紹介しています。
詳しくは以下
シームレスなパターンは様々なシーンで活用できるアイテム。デザーナーとしてはいくつか違ったテイストのアイテムを手元に揃えておきたいものです。そんな中今回紹介するのは、POPなカラーが目を惹く8bitの幾何学的パターンセット「8-bit Memphis Patterns Pack」です。
様々な幾何学模様を組み合わせて作られた15種類のパターンセットです。
詳しくは以下
デザインに関わる仕事をしている方なら特にフォントと向き合うことが多いと思います。タイトルやキャッチ、コピーなど用途によって適正なフォントが異なってきます。そんな中今回は、スタイリッシュかつ汎用性の高いフリーフォント「20 Free Fonts With Special Characters (02/2018 Edition)」を紹介したいと思います。
Jaapokki – Free Font on Behance
細かな装飾が施されたフォントからシンプルなものまで紹介されていますので、デザイナーの方必見です。
詳しくは以下
Webサイト内でよく見かけるアイコンですが、みなさんはどのように制作しているでしょうか。IllustratorやPhotoshopを使い、JPEGやPNG形式で保存している方も多いかと思いますが、今回紹介するのは、CSSとSVGで作るアイコンセット「Let’s make multi-colored icons」です。
SVGのメリットを活用したアイコンの生成方法が分かりやすく解説されています。
詳しくは以下
webページをデザインする際に重要なデザインテーマ、ユーザーにサイトの雰囲気を直感的に伝えるために最も重要な要素の一つですが、サイトの方向性を決定づける重要な部分であるが故に、その判断に苦労する場合も多いと思います。今回は、デザインテイストの参考になるwebサイトまとめの中から、レトロな雰囲気を演出できるwebサイトデザインをまとめた「Showcase of Retro Web Designs」を紹介したいと思います。
The Dollar Dreadful Family Library
色使いにこだわったものから、テクスチャや装飾でレロト感を演出しているものまで、さまざまな優れたwebサイトが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
フォントデザインに演出をつけたいけれど、どうやって加工したら良いのか分からない。そんなシーンに遭遇するデザイナーの方は多いかと思います。今回はそんな時に心強い味方となってくれるチュートリアルをまとめた「20 Top-Notch Retro Text Tutorials To Learn From」を紹介したいと思います。
Create a 3D Style Retro Text Effect – Vectips
さまざまなテイストのレトロフォントを作り上げることができるチュートリアルがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
販売されている衣服などに付いているプライス表示用のタグは、デザインの世界でもパーツ素材として広く愛用されています。ベースがシンプルゆえ、バリエーションが豊富なのも、愛用され続ける要素の一つではないでしょうか？そんな中今回紹介するのは、22種類のタグデザインpsd素材をまとめた「22 Free and Attractive Price,Sale,Discount Tag PSD Files」です。
立体的なタイプを中心に、さまざまなテイストのタグデザイン素材が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBでは欠かせないナビゲーションやボタン。様々な作り方がありますが、今日紹介するのはCSSで作るナビゲーションメニューの作り方のチュートリアルを集めたエントリー「Complete Toolbox: 55 CSS Menu And Button Coding Tutorials」です。
スライダー用から、タブメニュー、角アールのグラデーションメニュー、動きの付いたアコーディオン、プルダウンなどなど、CSS作れる様々なナビゲーションとボタンが公開されています。全部で55のチュートリアルが公開されていますが、今回はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
WEBの技術は日々進歩していて、様々な技術、技法が世の中には溢れていますが、今回紹介するのはjQueryやCSS、PHP、ASP、Ruby on Railsなどなど項目毎に、WEB開発に役に立つチュートリアルを30以上まとめたエントリー「30+ Eye-Opening Web Development Screencasts」です。
どれも実用的で、役に立ちそうなものが多いのですが、今回は紹介されている中から特に気になったチュートリアルをピックアップして紹介したいと思います。
詳しくは以下
文字を美しく見せるための技法が用いられ作成されたカリグラフィーフォントは、デザインに柔らかさや洗練された雰囲気を与えてくれます。そんなカリグラフィーフォントをまとめた「15 Free Calligraphy Fonts for Designers」を今回は紹介したいと思います。
（Billion Stars Font | dafont.com）
15種の、デザインに彩りを添えるカリグラフィーフォントが紹介されています。気になったものをピックアップしましたので下記よりご覧ください。
詳しくは以下
フォトショップのレイヤー構造等を細かな作りの部分まで格納できるpsd形式。グラフィック制作からWEBデザインまで様々な分野のデザインで使われていますが、今日紹介するのはプロフェッショナルなハイクオリティPSD素材集「30+ Professional Designs with Free Photoshop PSD Files」です。
写真加工からアイコンのベースになるようなものまで様々なpsdデータが登録されていますが今日は其の中から気になったものをいくつか紹介したいと思います。
詳しくは以下
説明要素の多いECサイトのデザイン。より分かりやすく使いやすくすることが、購入者を増やすための方法でもあります。今回はそんなシーンに最適なアイコンセット集「20+ Free E-Commerce Icon Sets to Download」を紹介したいと思います。
Exclusive Freebie : 36 e-Commerce Icons from DryIcons.com | BytesWire
フリーで利用できる、いろいろなデザインテイスト・いろいろな種類のアイコンが揃っています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
googleにはGoogle Sitemapsというサービスがあり、こちらを使えばgoogleさんが効率的にページをインデックスしてくれるようになります。しかしこのGoogle Sitemapsを利用する為にはsitemap.xml を作成する必要があります。手動でsitemap.xmlを作るのは一仕事なので今回はプラグイン「Google Sitemap Generator 」に頼りました。
プラグイン自体は日本語に対応していますが、インストール手順が日本語で同封されていませんでしたので今回は「Google Sitemap Generator 」導入までを紹介したいと思います。ちなみに当ブログはwordPress2.3で動作していますが問題なく利用できました。
念のために書いておきますが、「Google Sitemaps」の利用にはGoogleアカウントを取得する必要があります。
インストール手順は以下
photoshopを普段利用している方ならおなじみのpsdファイル。ベクター形式ではありませんが、レイヤー構造を維持でき、様々なカスタマイズが可能なデータ形式ですが、今日紹介するのはフリーで利用できるpsd素材を集めたエントリー「40 Free PSD Files」を紹介したいと思います。
Photoshop 3D Cube by ~thedevstudio on deviantART
ジャンルは問わず、様々なpsdファイルが集められています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
