デザインを開発するという視点でお伝えするクリエイティブ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
いろいろな種類のデザインボタンの作り方が分かりやすくまとめられた記事がピックアップされています。
詳しくは以下
もうすぐクリスマス。クリスマスをイメージさせるデザインツールやアイテムを取り入れることでもっと盛り上がる一日になるはず。今回はそんな時に活用したい、xmasデザインに活用したいフリー素材まとめ「Free Christmas Design Resources」を紹介したいと思います。
Here comes santa, card Vector | Free Download
クリスマスをテーマにした可愛らしいテイストを中心としたデザインフリー素材がピックアップされまとめられています。
詳しくは以下
ちょっとした空間やスペースをおしゃれに飾りたいとき、手軽に使えるイラスト素材はとても便利です。そんな中今回紹介するのは、さまざまな種類のイラスト素材がセットになった「117 Essential Tokens Set」の紹介です。
植物から幾何学模様まで、様々なイラストがまとまった素材セットです。
詳しくは以下
デザインに重要なフォント。フォントの選び方でデザインの印象はガラリと変わります。毎日数多くのフォントが公開され、世界中で多くのフリーフォントが制作され利用されていますが、今日紹介するのは比較的新しく作られたハイクオリティなフォントを集めたエントリー「9 New High-Quality Free Fonts」です。
少し変わったフォントから王道なものまで、様々なフォントがまとめられています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
世界中の国々の顔となる国旗は、それぞれの国や地域を表現した複雑なデザインも多く、その再現には時間がかかるもの。そこで今回は、雰囲気に合わせてさまざまなテイストが選べる国旗アイコンをまとめた「25 Free Sets of Attractive Flag Icons」を紹介したいと思います。
Flag’s Pack by ~Entodorm on deviantART
シンプルなアイコンから風合いを楽しめるアイコンまで、さまざまな国旗アイコンが紹介されています。中でも気になるものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
日本でもライセンスの一つとして認知されてきている、創造的な作品に柔軟な著作権を定義するライセンスシステム「Creative Commons」。定めた規定にもよりますが、ライセンスによっては、ルールの上で利用したり、作品に使ったりする事ができます。今日紹介するのはクリエイティブを行なう上で、素材となりうるクリエイティブコモンズライセンスで使える様々なメディアファイルを配布するサイトをまとめたエントリー「30+ Places To Find Creative Commons Media」です。
photo by A. Diez Herrero
メディアのジャンル別にサイトが紹介されています。今日はその中からジャンル別にいくつか紹介したいと思います。
詳しくは以下
WEBのデザインを制作するにあたって様々なツールが存在していて、会社やクリエイターで大きく異なりますが、photoshopで制作していると言う方は多いのではないでしょうか？今日紹介するのはハイクオリティーなフリーで利用できるPSDで作られたPSDテンプレートを集めたエントリー「50+ High-Quality Free PSD Web Templates」を紹介したいと思います。
BEVEL AND EMBOSS – Original and free website templates and icon sets.
全部で50ものテンプレートが集められていますが、今日はその中から幾つか気になったもの紹介したいと思います。
詳しくは以下
デザインをしていると必ずといっていいほどお世話になるのがストックフォト、撮影前はイメージを伝える為にカンプ用の写真を使ったりしている方も多いのではないでしょうか？今日紹介する「The4Cafe Backgrounds Gallery」はそんなカンプ用写真に便利な高解像度のイメージショットが多数ダウンロードできます。
ファイル数もクオリティもなかなかの物で、写真はジャンルによってカテゴライズされていますので、非常に探しやすくなっています。
詳しくは以下
そのままでは何か寂しい時に重宝するのがテクスチャ。実在する紙や木などのテクスチャの他にも様々なテクスチャがまとめられ公開されていますが、今日紹介するのは重ねても背景でも使える、高品質な光の背景「40 Free High Resolution Vibrant Blurred Backgrounds」です。
上記のように写真に重ねることで、スナップ写真に大きく表情が現れます。全部で40ものテクスチャがまとめられており、以下からその全てをご覧いただけます。
詳しくは以下
テキストに動きをつけることが可能なWeb。昨今のWebデザインにおいて欠かせない要素の一つとなっています。テキストが流れるように動くだけで強いインパクトを与えることができるでしょう。そんな動きの例をまとめた「10 Amazing CSS & JavaScript Text Animation Snippets」を今回はご紹介していきます。
効果的なアニメーション演出を実現できるCSS&javascriptがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBサイト制作には、画像のデザインをはじめ、インターフェースの基本となるボタンや設定などのさまざまなパーツが必要となります。今回はそんなパーツを手軽に利用できる、WEBデザインに使いやすいPSDテンプレートをまとめた「Useful PSD Templates for Free Download」を紹介したいと思います。
Transparent UI Kit | Design Kindle
インターフェース設計に役立つ素材から、アイコンなどのパーツ素材まで、さまざまなPSDテンプレートが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
