デザインを開発するという視点でお伝えするクリエイティブBLOG
伝えたい情報を1Pにまとめた縦長の1ページレイアウト。メニューなどは存在しますが、基本的には上から読んでいくような構成でユーザービリティに優れた簡潔なWEB構成となっています。今回紹介するのはそんな1ページレイアウトの中でもクリエイティブなものを集めた「50 Beautiful One-Page Websites for Inspiration」です。
様々な業種業態の1ページで制作されたWEBページが全部で50集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
フロントエンドエンジニアの多くの方は、自分が利用するエディタというのを決めているとは思いますが、緊急の時だったり、どうしても自分のPCが手元に無い環境でコードを書かなくてはいけないなんて事も極稀ではありますがあると思います。今回紹介するのはそんな、もしもの時のためのHTML、CSS、JSが同時に編集できるシンプルなオンラインエディタ「playcode.io」です。
この「playcode.io」非常にシンプルなツールで順番に左からコントロールパネル、HTML・CSS・Javascript、HTMLプレビューと並んでおり、結果を見ながらコーディングすることが可能です。
詳しくは以下
WEBの演出の一つで、UXのストレスを軽減してくれるローディングアニメーション。WEBサイトがだんだんリッチになる中、当たり前の存在になってきていますが、今回紹介するのはCSSとテキストで実現するシンプルなローディングアニメーション「text-spinners」です。
通常ローディングアニメーションはいくつかの画像を利用して生成されますが、このアニメーションはCSSとテキストのみで制作されるため非常に軽量です。
詳しくは以下
WEBサイトのクリエイティブのクオリティはデザインは然ることながら、どんな動きをさせるかというところでも、大きく影響がありますが、今日紹介するのはサイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」です。
「Block Reveal Effects」ではまず、はテキストや写真の出現エリアに色ベタのエリアが出現し、それがズレながら、本来描画されるオブジェクトに変わっていくというものです。
詳しくは以下
PCで見るWEBサイトの印象を大きく左右するアクションの一つホバーアクション。主にWEB上のユーザー導線上に配されるものだけに、小さいながらも、このアクションが心地よいかでサイトのクオリティを左右するものですが、今日紹介するのはクリエイティブなホバーアクションを実装できる「Tilt Hover Effects」です。
一般的に色が変わる、透明度が上がる、画像が切り替わるなどといったものでは無く、複数の画像がズレたり、アニメーションが加わったりマウス座標の位置で見た目が変わったりと、多彩なホバーアクションが簡単に実装できるようになっています。
詳しくは以下
デザイナーが自分の価値や力量を知ってもらうために必要不可欠なのが作品をまとめたポートフォリオ。昨今では紙のポートフォリオだけでは無く、WEBでのポートフォリオが必要なケースも増えてきているように感じます。今日紹介するのはシンプルで洗練されたポートフォリオサイトテンプレート「Magnet Portfolio Template」です。
このポートフォリオサイトテンプレート「Magnet Portfolio Template」色彩も写真以外は白と黒でまとめられており、作品自体が映えるデザインになっています。その他のページ構成は以下からご覧ください。
詳しくは以下
Designdevelop上のラージバナーで告知がすでに出ていますが、参加させて頂いているブログネットワーク、AMN(アジャイルメディアネットワーク)で読者アンケートが開催されています。普段ブログを定期的に読んでいる方はどういう方々なのか、また、今後ブログにどういった内容を期待されているのかのアンケートです。
普段Designworks、Designdevelopを行動されている方、または読んで頂いている方は、お時間ありましたら、ご協力頂けるとありがたいです。DesignworksとDesigndevelopでは初めてのアンケートとなります。普段読んで頂いている方の意見に耳を傾けながら、今後もブログ運営を続けていきたいと考えておりますので、なにとぞよろしくお願い致します。
アンケートは「第3回AMNブログ読者アンケート」から行なえます。
※無記名のアンケートになりますので、本音のご意見をお寄せ頂ければ幸いです。
※このデータは集計して利用するだけで、個別のデータを外部に開示することはありません。
クリエイティブの業界では世界的に利用されているphotoshop。数多くの便利な機能が実装されていますが、そのなかでも記録した動作をボタンひとつで再現してくれるアクションはとても便利です。今日紹介するのは写真補正に使えるフリーphotoshopアクションを集めたエントリー「500+ Free Professional Photoshop Actions」です。
sa-cool actions 2.08 colors by ~sa-cool on deviantART
写真補正、色補正のアクションを中心に様々なphotoshopアクションが公開されています。今日はその中から気になったものをいくつか紹介したいと思います。
詳しくは以下
デザインに質感を与えてくれるテクスチャ。便利な素材だけに、世界中で様々なテクスチャが公開されていて、そのなかでもひとつのジャンルとなっているのがグランジテクスチャ。今日紹介するのは質感のあるグランジテクスチャを集めた「12 Experimental Dirty Textures」というエントリーです。
今回のテクスチャはタイトルにDirtyとあるとおり、少しくらめで、グランジも激しい感じのテクスチャが中心に集められていました。今日はそのなかから何枚かピックアップして紹介したいと思います。
詳しくは以下
アンダーグラウンドなデザインによく利用される、メタルなどのハードなテクスチャは、自然な風化の雰囲気を表現するのが難しい素材。そんな中今回紹介するのが、自然な風化の質感を楽しめるテクスチャパック「Metal: Texture Pack」です。
free_metal_texture_07.jpg (JPEG 画像, 4252×2835 px)
錆や傷など、自然に風化してできた風合いが楽しめるテクスチャが8種類もセットになったテクスチャパックとなっています。中でも気になるテクスチャをいくつかピックアックしましたので、下記よりご覧ください。
詳しくは以下
PCの前と言う変わらない景色の中で仕事をしているとデスクトップの壁紙を変えるのが、良い気分転換になったりもします。今日紹介するのはインスピレーションを得るためにも使えるクオリティの高い、クリエイティブなフリー壁紙を紹介しているエントリー「30 cool wallpapers for designers」です。
写真合成から、ベクターデータのグラフィックまでデザインの手法は様々で、バリエーション豊かな壁紙が全部で30紹介されています。今日はその中から気になったモノをいくつか紹介したいと思います。
詳しくは以下
今まで様々なFontを紹介してきましたが、今回紹介する「Conglomerfont」はデザイナーが書体の数分かかわって作られたという珍しいフリーフォントです。
フォントはA〜Zまでのアルファベット大文字、小文字と数字で構成されています。シンプル目なモノから、イラストフォントのようなものまでデザイナーが違うだけあって様々なデザインで構成されています。
収録フォント一覧は以下から
表現のクオリティを上げてくれるテクスチャ。そのまま利用するだけではなく、薄く引いたり、一部分だけを切り取って使ったり、クリエイティブでは非常にお世話になる素材の一つですが、今日紹介するのはスタンダードから変わったものまで、最近リリースされたテクスチャパックまとめたエントリー「50 Fresh and Free Texture Packs To Spice Up Your Designs」です。
いくつかまとまってパックになったものを数多くまとめられています。今日はその中から気になったえテクスチャパックをピックアップして紹介したいと思います。
詳しくは以下
クリスマスを間近に控え、クリスマス系デザインの制作に追われている方もいらっしゃるのではないでしょうか？今回はそんなシーンで活用したい、クリスマスフリーアイコンセット「Free Download : 16 Fresh Flat Christmas Icons」を紹介したいと思います。
クリスマスデザインに彩りを与えてくれる、フラットテイストなクリスマスアイコンが16種セットでダウンロードできるようになっています。
詳しくは以下
背景に敷き詰めたりテクスチャとして使用したり、パターン柄はデザインにさまざまなニュアンスを与えてくれる便利なツールです。そんな中今回紹介するのは、Photoshopで使えるさまざなパターンセット「Free Photoshop Patterns for Graphic Designers」です。
6 Polka Patterns – Free Photoshop Brushes at Brusheezy!
シンプルなものや細かなグラフィック表現がされているもの、可愛らしいものから変わったものまで、多種多様なパターンが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
就職活動をする時に必ずといって良いほど必要になってくる履歴書。一般的には、無難なフォーマット化された用紙に記入することがほとんどだと思いますが、今回は履歴書でクリエイティブ性をアピールしたい時におすすめなフリーテンプレート集「Free Professional CV/Resume and Cover Letter PSD Templates」を紹介したいと思います。
Resume templates — Яндекс.Диск
特に、アート・デザイン・クリエイティブ系の就職活動をされる方におすすめの、今までにないデザイン性の高い履歴書テンプレートが揃っています。
詳しくは以下
