デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBデザインを円滑にしてくれるアイコンセット。様々なテーマでアイコンセットが日々公開され、クリエイターの制作活動の一助となっていますが、今日紹介するのはWEBデザイン自体をテーマにしたフリーのアイコンセット「100 Web Design Icons 」です。
このアイコンセットはWEBデザインでよく見かける、ワイヤーフレームやビデオプレイヤー、解析画面、スマートフォンなどのUIなどなど、WEBデザインをテーマにしたアイコンが全部で100個収録されています。アイコンの一覧が公開されていましたので以下からご覧ください。
詳しくは以下
自身の分身として表示されるアバター。皆様は何を設定されているでしょうか？ソーシャルメディアが広く利用され様々な種類がある今アバターもデザインダミーとして制作しなくては行けないなんてことも増えてきたと思います。今日紹介するのはフォーマルからアニマルまでフリーで利用できるベクターアバター「Avatar vector collection」です。
「Avatar vector collection」はベクターで制作された全54種類ものアバターがまとまっており配布されているものです。人間が42種類、動物が12種類収録されています。収録されている全アバターは以下からご覧ください。
詳しくは以下
WEBサイト制作において重要なアイコン。あまり面積を取ること無く、端的に直感的にわかりやすく表現できるアイコンはスマートフォンが中心となったWEB制作現場ではますます重要な存在となっている気がします。それだけにぴったり表現されたアイコンというのはクリエイティブや最終的な使い勝手に大きな影響を与えます。今日紹介するのは、少し変わったデザインと学びを表現したアイコンセット「Creativity & Learning Icon Set 」です。
このCreativity & Learning Icon Setは鉛筆だったり虫眼鏡、顕微鏡、三角フラスコ、顕微鏡で見た世界など全部で30のアイコンがまとめられています。
詳しくは以下
文字のストロークの端にある小さな飾りがあるセリフ体フォント。セリフが無い書体と比べると、特徴的な印象が強いのですが、今日紹介するのはキレイ目からPOPまであらゆるセリフ書体を集めた「43 Free Serif Fonts to Dream of」というエントリー。
Butler – FREE FONT on Behance
Licence: Free for private and commercial use
Format: OTF
様々なタッチのセリフフォントが集められており、ライセンスやフォーマットも合わせて明記されています。今日はその中でも気になったフォントを幾つかピックアップしたいと思います。
詳しくは以下
解像度が多様化してきてWEB制作の一つの主流となっているレスポンシブデザイン。多くの場合解像度によって画像を出し分けたり、フォントサイズを可変したりと解像度ごとの処理をしていると思います。今日紹介するのはそんなレスポンシブデザインの精度をより高める、レスポンシブに利用できるフリーアイコンセット「Responsive Office Icons」です。
こちらのアイコンは16px、30px、40px、80pxと4段階で制作されており、さらに素晴らしいのが、単純に大きさを変えているだけでは無くて、大きさによって作りこみ度合いを変え視認性を確保しています。
詳しくは以下
ロゴやバッジなどを制作する際にとても便利なフリーテンプレート素材は多数配布されていますが、たくさんの中からどれを選んでよいか迷ってしまうことも。今回はそんな時に参考にしたい、ヴィンテージ調のロゴデザイン作成に活用できる「15 Free Vintage Logo Template Collections」を紹介したいと思います。
Freebie: 5 Vector Insignias | Every-Tuesday
アンティークな雰囲気を感じることができるロゴテンプレート、いろいろな種類がセットでダウンロードできるようになっています。
詳しくは以下
インターフェイスを補助したり、デザインの質を上げてくれる、便利な素材アイコン。WEBデザインでは、メニューだったり、その他付随する機能を表すときには非常に重宝しますが、今日紹介するのはシンプルで上質な280個ものアイコンセット「Steadysets – 280 free icons」です。
こちらは普段利用しそうなインターフェイス系のアイコンから、宝石やハート、注射器といったグラフィック系のアイコンまで、全部で280個ものアイコンがセットになったアイコンセットとなっています。
詳しくは以下
いつものデザインにマンネリ気味、ひと味違った要素が欲しい。今回はそんな時に是非活用してほしい、8つの新しい個性的なフォント「8 Fresh Free Fonts for your Designs」を紹介したいと思います。
どのフォントも特徴がありクオリティが高い、デザインに効果的にアクセントを付けることができそうなものばかりが集められています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBを制作する上で、印象を決定付ける大きな要素が背景。表示面積が大きいだけに背景が与えるものは大きい。今日紹介するのはそんなWEB制作の際に使えるシームレスに敷きつめられるWEB用背景素材配布サイトを集めたエントリー「27 Best WebSites to Download Free Seamless Patterns」を紹介したいと思います。
ジェネレーター的な使い方ができるサイトから種類豊富に幅広い背景素材を配布されているサイトまで様々なサイトが収録されています。今日はその中からきになったものをピックアップして紹介したいと思います。
詳しくは以下
様々な場面で見かけるアイコンは種類も豊富ですが、それぞれのインターフェイスにピッタリと合ったデザインを探すのは意外と大変なもの。そんな中今回は、コレクションしておくと便利な、カラーリングがPOPなベクターアイコンセット「Dusk UI Icons (SVG, EPS, PDF, PNG)」を紹介します。
80種類のカラフルでPOPなテイストのアイコンがセットになっており、デザインに華やかな彩どりを与えてくれそうです。
詳しくは以下
WEB 上で見かけてこの色いいなぁと思っても、HTML部分ならソースを開いて、底の部分の色を探しださなければならないし、画像ともなると、ダウンロードするか、スクリーンショットで取ってphotoshopで開いてスポイトツールでとかなりめんどくさい事になります。今日はそんなWEB上で気に入った色の情報を取得することに関してかなり便利なfirefoxアドオン「ColorZilla」を紹介したいと思います。
インストール方法は「ColorZilla Extension for Firefox and Mozilla」のサイドバーの一番上「Install ColorZilla 1.0」をクリックすればインストールが開始されます。インストールすると上記のようなブラウザの左下にスポイトアイコンが表示されるようになります。スポイトをクリックするかShift+Escを押すと色情報を取得開始です。
マウスカーソルが十字になったら色情報の見たい箇所に移動させると情報をRGB、16進数で表示してくれます。嬉しい事に、色情報は10進数、16進数など様々な形式でコピー叶です。また色情報はパレットに記憶させる事ができるため、普段からチェックしておけば自分の好みのカラーパレットが作れ、デザインに役立つかと思います。
素材の中でも種類が非常に豊富なアイコン。常に新しいバージョンがリリースされています。そんな中今回紹介するのは、フリーダウンロードできる最新のアイコンセット「30 Recently Released Free Icon Sets for Web Designers」です。
定番として利用できそうなものが豊富なアイコンセットが多数紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
5978個のハイクオリティなアイコンを集めたサイトが今回紹介する「5978 High Quality Icons」です。すべて制作者さんが公開と言うわけではなく、WEB上からクオリティの高いアイコンを集めてきたリンク集という形になっています。
集められているアイコンは様々で上記のようなソーシャルブックマーク系のアイコンからRSSアイコン、デスクトップで使えそうなものまで幅広く集められています。
詳しくは以下
現在WEBサイトで良く見かけるテクニックの一つスライダー。少ないスペースで様々なコンテンツを見せられるのが魅力ですが、今日はそんなスライダーのテクニックを集めたエントリー「25+ Awesome Slider Techniques」を紹介したいと思います。
よく見るスライダーから、動きが特殊なものやインターフェイスが優れているもの様々なスライダーのテクニックが紹介されています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
お正月と言う事で、様々なイベントが各地で開催され思い出が沢山と言う方も多いかと思います。今日紹介するのは撮りためた、写真、動画、音声等を簡単に加工してくれるオンラインツールを集めたエントリー「30+ Free Online Multimedia (Photo, Audio, Video) Editors 」を紹介したいと思います。
そのままでも良いけれど、編集する事で、より魅力的に見せてくれます。今回紹介するツールはすべてオンラインツールということで、インストールなどの手間は必要なく、インターネットが利用できる環境であれば、簡単に利用できます。いくつか紹介されていますが、今回はそのなかからきになるものをいくつか紹介したいと思います。
詳しくは以下
写真見せる時、その写真自体の完成度やクオリティも大切ですがWEB上で見せるなら見せ方も重要な要素になってきます。そこで今日紹介するのは写真を机の上においたポラロイド写真のように見せてくれるFLASHギャラリーサンプル「Polaroid Gallery」を紹介したいと思います。
swfのセットの他Flaファイルがダウンロード可能なのである程度のカスタマイズはできそうです。ライセンス形態はCreative Commons Attribution-Noncommercial 3.0 Unportedでその範囲であれば自由に使う事が可能です。
画像をFlickrからFlickrIDで指定してFlickr上の写真データも読見込ませる事も可能みたいなので連携させれば面白い使い方もできそうです。ここまでのものでFlaファイル配布なのは嬉しい所です。Polaroid Gallery動作サンプルは以下のリンクからどうぞ
via phpspot開発日誌
