デザインを開発するという視点でお伝えするクリエイティブBLOG
最近ではブログを始める人も多く、そんな中で自分の記事を広めていくことはなかなか難しいことですが、ちょっとしたことを改善するだけで意外と簡単に自分のブログを広めることができるのかもしれません。今回はそんなシーンで参考にしたい、「20 Blog Design Tips for Creating Successful Blogs」を紹介したいと思います。
The Complete List of Resources I Used To DIY My Blog Design – Where My Soul Belongs
ブログの成功のために必要なテーマの選択やグラフィック要素の使い方など、成功するためのヒントが紹介されています。いくつか気になったものをピックアップして下記にご紹介していますので、下記よりご覧ください。
詳しくは以下
webサイト制作のアイデアはあっても、実際に作ろうと思うとどこから手を付けていいのか分からない、という方もいらっしゃるのではないでしょうか？そこで今回紹介するのは、webデザインに重要な4つの要素をまとめた「Four Essential Web Design Tips」です。
webサイトを構築するにあたり押さえておくべき重要な要素がポイントを絞って紹介されています。
詳しくは以下
企業のシンボルや、ブランディング、プロモーションなどに使用されるロゴには、個性が求められるシーンもしばしばあるかと思います。今回はそんな時に是非参考にしたい、Illustratorで作るロゴデザインチュートリアル「40 Tutorials for Outstanding Text Effects in Illustrator」を紹介したいと思います。
（Create a Mummy Text Effect In Illustrator | Vectips）
Illustratorの機能を駆使し制作されたハイクオリティなロゴデザインが、チュートリアルと共に多数紹介されています。中でも特に注目したロゴをピックアップしましたので、下記よりご覧ください。
詳しくは以下
世界的に利用されている高機能な写真加工ソフトphotoshop。その世界は奥が深く、テクニック次第では様々な世界を創る事ができますが、今回しょうかうするのはphotoshopを使った写真加工のチュートリアルを集めたエントリー「35 Fresh Photo Effect Photoshop Tutorials」。
Combine Stock Photography to Create a Sleepy Japanese Village in Photoshop
現実世界をより引き立てるための加工テクニックから、空想の世界を描くためのテクニックまで幅広い写真加工のチュートリアルが紹介されています。今回はその中から幾つか気になったチュートリアルをピックアップして紹介したいと思います。
詳しくは以下
制作現場では幅広く利用されているベクターデータを扱える制作ソフトイラストレーター。紙やグラフィックのデザインが中心という方にはおなじみのソフトだと思いますが、レイアウトにとどまらず、極めて行けば様々な表現が可能です。今日紹介するのはイラストレーターのチュートリアルを100まとめたエントリー「100 Best Illustrator Tutorials of All Time (From Newbie to Pro)」です。
Turn a Boring Bar Graph into a 3D Masterpiece | Vectortuts+
立体的な表現、光、グラデーションを上手く使った質感の表現など、様々なイラストレーターのテクニックが公開されています。今日はその中から幾つか気になったものを紹介したいと思います。
詳しくは以下
WEB制作業界ではすっかりおなじみのキーワードとなってきたCSS3。ブラウザの対応も進んでいて、そろそろ手を付けていこうというかたも多いかと思います。今日紹介するのはCSS3を駆使して、立体的でアナログ感のあるボタンを作るプロジェクト「BonBon Buttons – Sweet CSS3 buttons」です。
シャドウと立体感と角丸などCSS3ならではの機能をふんだんに利用してボタンを作っています、見た目だけではなくて、クリックした時の動作感などもこだわっていて、表現だけではないリッチなボタンになっています。
詳しくは以下
さまざまな使い方ができるベクター素材はとても便利な存在。気になったものをストックしておくことで、いろいろなシーンで活躍してくれます。今回はそんなストックのコレクションに加えておきたい、種類が豊富なジオメトリックベクター「45 Geometric Vector Shapes」を紹介します。
白と黒の異なるカラーで展開された幾何学模様が、45種類セットになっています。
詳しくは以下
今やWEB制作で標準ともいえるCSSとXHTMLによるレイアウト。今日紹介するのはそのCSSとXHTMLによって作られた無料のテンプレートを集めたエントリー「101 High Quality CSS And XHTML Free Templates」です。
様々な種類、ジャンル、デザインテイストのテンプレートが集められています。今日はその中から気になったテンプレートをピックアップして紹介したいと思います。
詳しくは以下
デザインに人間の写真やイラストを取り入れる機会は多く、その視覚要素を通して的確に情報を伝える手段が、WebでもDTPでもよく利用されています。今回紹介するのは40種類ものシルエット素材を集めたエントリー「40 Amazing People Silhouette Sets for Designers」です。
People Silhouette – Vecteezy! – Download Free Vector Art, Stock Graphics & Images…
ビジネスのフォーマルなイメージのものから、スポーツシーン、カジュアルなものまで、バラエティ豊かなシルエットが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
デザイン制作時に使うことの多い布地などのテクスチャは、たくさんの種類を保持しておきたいもの。そんな中今回紹介するのが、高解像度が嬉しい!フリーファブリックテクスチャセット「Free High-Resolution Fabric Textures」です。
ジーンズやしわのある布地など、解像度300dpi、幅が2000px以上という高品質な素材が6種類セットとして紹介されています。
詳しくは以下
紙などのアナログな雰囲気を演出できるテクスチャは、デザイン制作になくてはならないツール。そこで今回紹介するのが、さまざまな質感を表現できるペーパーテクスチャまとめ「30 Sets of Free High Quality Lined Paper Texture」です。
Notebook by ~origin-missing on deviantART
ルーズリーフから方眼紙まで、さまざまな種類の紙が網羅されたテクスチャまとめとなっています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
サイト内で検索をしたり、また、ユーザー個人の情報を保持するサイトなどではパスワードやIDの入力などが求められることがほとんど。その際に使用するのが入力フォームですが、今回紹介するのは、ダーク系デザインのフリーpsdフォームを集めた「22 Dark Form PSD Freebies for Web & UI Designers」です。
Search Box PSD Freebie | Free Photoshop File | Best PSD Freebies
ダークカラーをベースにしたpsdのフォーム素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ワイヤーフレームは新しいWebサイトやサービスのUIを考える時、その構造を可視化するもので、制作する前には必ず作るというクリエイターも多いのではないでしょうか？今回紹介するのは改めて参考にしたいクリエイター達のワイヤーフレーム集「UI & Wireframe Sketches to Keep You Inspired」です。
Dribbble – App design | Phase 1: Sketching by Alex Deruette
軽めのタッチのものから、細かく描かれたものまで、さまざまなワイヤーフレームが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
WEB 上で見かけてこの色いいなぁと思っても、HTML部分ならソースを開いて、底の部分の色を探しださなければならないし、画像ともなると、ダウンロードするか、スクリーンショットで取ってphotoshopで開いてスポイトツールでとかなりめんどくさい事になります。今日はそんなWEB上で気に入った色の情報を取得することに関してかなり便利なfirefoxアドオン「ColorZilla」を紹介したいと思います。
インストール方法は「ColorZilla Extension for Firefox and Mozilla」のサイドバーの一番上「Install ColorZilla 1.0」をクリックすればインストールが開始されます。インストールすると上記のようなブラウザの左下にスポイトアイコンが表示されるようになります。スポイトをクリックするかShift+Escを押すと色情報を取得開始です。
マウスカーソルが十字になったら色情報の見たい箇所に移動させると情報をRGB、16進数で表示してくれます。嬉しい事に、色情報は10進数、16進数など様々な形式でコピー叶です。また色情報はパレットに記憶させる事ができるため、普段からチェックしておけば自分の好みのカラーパレットが作れ、デザインに役立つかと思います。
web制作をする際に、既存サイトのレイアウトやデザイン感などを参考にすることは、とても多いかと思います。そんなシーンにアイデアソースとして役立てたい、クリエイティブ性の高いwebサイトを集めた「20 Creative Web Designs」を今回は紹介します。
デザインはもちろん、ユニークな演出でユーザーを楽しませてくれるwebサイトが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザイン制作をする時には、いろんな種類の素材を使用して作り上げていくことも多いと思います。今回はそんなシーンにおすすめのまとめ「50 fantastic freebies for web designers, May 2014」を紹介します。
（Purple UI Kit Flat Responsive web template by w3layouts）
フォント、テクスチャ、UI、psd、JS、CSSといった多彩な素材が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
