デザインを開発するという視点でお伝えするクリエイティブBLOG
クリスマスまであと数日。デザインのちょっとした部分にもクリスマス感を取り入れることで、より気分を高めることができるのではないでしょうか。そんな中今回ご紹介するのは、クリスマス気分を盛り上げてくれるグラフィカルなトグルボタン「CodePen – Bauble Toggle」です。
クリスマスのオーナメントをイメージさせるイラストがボタンになった、可愛らしいトグルボタンです。
詳しくは以下
WEBサイトで何かを選択する際に使用するチェックボックス。アンケート機能やメールフォームにはよく利用されていることから、機会が多いのであれば、テンプレートとして所持しておきたいものです。そんな方におすすめできる「CSS Checkbox Library」を今回は紹介したいと思います。
チェックボックスに焦点をあて、いろんなタイプのものがまとめられています。気になったものをいくつかピックアップしているので下記よりご覧下さい。
詳しくは以下
WEBやアプリ上でのボタンはユーザーにとって大きな意味を持ち、非常に重要な要素。一目でボタンだとわかるようなつくりであることはもちろんのこと、遊び心あるエフェクトはユーザーの目を楽しませます。今回はそういったボタンを探している方におすすめ、最新CSS3ボタンのまとめ「50 CSS3 Button Tutorials For Designers [2017]」をご紹介します。
すべてにデモがついているので、その場でどんな動きをするのかを確認することが可能。50種類もあるボタンの中でも気になったものをいくつかピックアップしていますので、下記よりご覧下さい。
詳しくは以下
Web上においてボタンは欠かせないもの。何か物を購入する際や、メールを送る際には必ずクリックするものだからこそ、分かりやすく、デザイン性の高いものにしていきたい。そういったシーンでも活躍してくれるボタンコレクション「10 Awesome CSS Button Libraries & Collections」をご紹介していきたいと思います。
コーディング上でデザインの可変が可能なCSSで作成されたボタンをまとめたものになります。下記にいくつかピックアップしてありますので、ご覧下さい。
詳しくは以下
WEBサイトのユーザーインターフェイスの中で最も重要な要素の一つボタン。主にユーザーがページ遷移や情報を取得する時に利用するため利用されます。よく目にする部分だけに、ここの動きやクリエイティブはWEBサイトのクオリティを決定づける要素の一つだと思います。今日紹介するのはコピー&ペーストで気軽にクリエイティブなCSSボタンが設置できる「bttn.css」です。
このbttn.cssでは様々な大きさ・色・動きがセットされており、どのボタンも簡単に実装することが可能です。
詳しくは以下
登録さているボタンは全部で15種類。どれもシンプルでマウスオーバーでそれぞれのボタンにあったアクションが展開されるようになっています。色ベタのものと罫線で表現されたものと絞り込んで探すことも可能です。
カスタマイズできる項目としてはカラー６種類、サイズが4種類となっています。シンプルでしかもCSSだけで制作されているので非常に使い勝手が良いと思います。ボタンデザイン・アクションで迷っている方は是非どうぞ。
クリックすることでアクションが起きることを認識させるためのツールとして利用されるボタン。形が大きさ、デザインなど、ベースの制作物によって合わせるタイプも選びたいもの。しかしどのように作ったらよいか分からず、ありきたりになってしまうことは意外に多いのではないでしょうか？今回はそんな時に参考にしたいボタン作成のチュートリアルまとめ「Call to Action: 13 Tutorials For Creating The Perfect Button」を紹介したいと思います。
4-Designer | Deep analysis on how to create a high-precision button
いろいろな種類のデザインボタンの作り方が分かりやすくまとめられた記事がピックアップされています。
詳しくは以下
アンダーグラウンドなデザインによく利用される、メタルなどのハードなテクスチャは、自然な風化の雰囲気を表現するのが難しい素材。そんな中今回紹介するのが、自然な風化の質感を楽しめるテクスチャパック「Metal: Texture Pack」です。
free_metal_texture_07.jpg (JPEG 画像, 4252×2835 px)
錆や傷など、自然に風化してできた風合いが楽しめるテクスチャが8種類もセットになったテクスチャパックとなっています。中でも気になるテクスチャをいくつかピックアックしましたので、下記よりご覧ください。
詳しくは以下
デザインに合わせてイメージにあったフォントを選ぶことはとても重要です。そんな中今回紹介するのは、美しく繊細な雰囲気が特徴の細字フリーフォントまとめ「35 Beautiful and Free Thin Fonts」です。
Champagne & Limousines Font | dafont.com
欧文フォントの、細いラインで描かれたフリーフォントの数々がピックアップされています。気になったものを以下にまとめましたので、ご覧ください。
詳しくは以下
Webサイトで情報を公開する学校はとても増えていますが、教育機関のWebサイトは比較的情報量が多く複雑になってしまいがち。そんな時におすすめなアイテムが、今回紹介する教育系フリーアイコンセット「30 Free Education Icons Sets」です。
School Icon Collection Vector | Free Download
ポップなテイストからフラットなデザインまで、様々なアイコンがセットでダウンロードできるようになっています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
グラフィック制作にとても便利なベクターデータ。今までDesigndevelopでは数々のベクターデータ関連の情報を紹介してきましたが、今日紹介するのはベクターデータをまとめて配信しているベクターデータ集サイトとも言えるサイトをまとめたエントリー「25 Best Sites to Download Free Vector Files」です。
今日はその中から今までDesigndevelopで紹介していないベクターデータサイトをいくつピックアップして紹介したいと思います。
詳しくは以下
国内外ともに人気のブログツールWordPress。人気の秘密には配布されているテーマの豊富さがありますが、今日紹介するWordPressテーマ「Leopress」は一風変わっていて、タイトルにもあるようにMacOSX Leopardを再現したWordPressテーマになっています。
スクリーンショットを見てもおわかりになるとおり、本当にOSの画面のようです。背景や、アイコン、メニューの処理など細かいところに凝っていてここまでかというくらいMacOSX Leopardに近づけてあります。
詳しくは以下
photoshopで画像やデザインを作り込んでいく上で、かなり便利なphotoshopブラシ。質感を見事に表現してくれていたり、表現を豊かにしてくれたりと、photoshopでデザインする上では欠かせないものです。今日紹介するのは便利に使える表現の幅を広げてくれるフリーphotoshopブラシを集めたエントリー「10 Awesome Free Photoshop Brushes 」です。
光、雲、水滴などなど様々なphotoshopブラシが集められていますが、今日はその中からいくつか気になったphotoshopブラシを紹介したいと思います。
詳しくは以下
特にクリエイティブ業界ではフリーで仕事をしているという方も多く、仕事の受注前にプロフィールを提出するということも多いのではないでしょうか？プロフィールは、紙一枚で自分の今までの仕事が評価される重要なもの。そこで今回紹介するのは、クリエイティブ性が高く、相手に伝わりやすいプロフィールデザインをまとめたwebデザイン集「40 Most Creative Resume Design Ever Seen」です。
（Server Resume by ~rkaponm on deviantART）
多くの情報を見やすくレイアウトした作品が豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
adobeのデザインソフト・イラストレーター。バージョンのアップと共に機能性も非常に充実し、これまで表現できなかったグラフィック表現も可能になってきています。そんな中今回紹介するのは、イラストレーターを使った非常にクオリティの高いデザインのチュートリアル集「40+ Fresh And Useful Adobe Illustrator Tutorials」です。
（Create a Magical Vector Landscape Using Illustrator – Vector Premium Tutorial | Vectortuts+）
物やアイコン、ボタンなど、イラストレーターで表現したとは思えない程リアルな質感をどのような操作でデザインしたのか？を、このまとめで知ることができます。いくつか事例をピックアップしましたので、下記よりご覧ください。
詳しくは以下
水彩イラストは、鮮やかな色合いと、柔らかなニュアンスをデザインにプラスしてくれる存在として、非常に魅力的です。今回はそんな、水彩イメージのアートワークセット「FlorArt Watercolor Kit」を紹介します。
まるで本当に水彩絵の具で塗ってあるかのようなクオリティの高いイラストレーションとなっています。
詳しくは以下
何かとデザインに必要になってくるアイコン。直感的にユーザーに説明することができ、今や欠かせない存在となっています。今回はそんなアイコンの中でも、定番から個性的なものまでをまとめた「A New Collection Of Free Icons For Designers」をご紹介したいと思います。
シンプルなテイストのアイコンは馴染みもよく、バリエーションとしてストックしておきたい種類がずらり。気になったアイコンを幾つかピックアップしてご紹介しますので、以下よりご覧下さい。
詳しくは以下
