デザインを開発するという視点でお伝えするクリエイティブ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
いろいろな種類のデザインボタンの作り方が分かりやすくまとめられた記事がピックアップされています。
詳しくは以下
サイトに動きを付ける、コンテンツを限られた範囲内で最大限に見せるために利用されるスクロール。シンプルなものが取り入れられがちですが、今回紹介するのは、さまざまな動きのスクロールプラグインまとめ「12 Free Scrolling Plugins For Websites」です。
動きに特徴のあるスクロールプラグインが12種紹介されています。
詳しくは以下
もうすぐ、2月の一大イベント・バレンタインがやってきます。デザインの仕事でもバレンタイン関連の制作を手がけている方も多いのではないでしょうか？そんな中今回紹介するのは、バレンタインデザインに最適なフリーフォント集「20 Free Valentine’s Day Fonts to Get You in the Mood」です。
ハートモチーフがあしらわれていたり、女性らしい可愛らしいテイストであったりと、バレンタインテイストのデザインにぴったりなフォントが紹介されています。
詳しくは以下
デザインワークの広がりに欠かせないPhotoshopブラシは、さまざまなテイストに合わせて利用できるようストックしておきたいもの。そこで今回紹介するのが、比較的最近発表された、表現力の幅が広がるPhotoshopブラシセットをまとめた「50+ New and Free Photoshop Brush Packs」です。
Grass and Plant SET 3 PS by *FrostBo on deviantART
自然のある風景を再現できるブラシから、特徴的なラインを表現できるブラシまで、さまざまなブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザイン制作時にパーツを一つ一つ制作すると、どうしても制作時間が膨らんでしまいます。そんな時に活用したい、デザイン制作を彩るクオリティーの高いPSD素材をまとめた「40 Fresh PSD’s Files For Free Download」を紹介したいと思います。
GraphicsFuel.com | Paper Login Form PSD
アイコンからUIエレメントまで、デザイン制作に必要なさまざまなパーツ素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
手軽にアンティークな雰囲気を演出できるスタンプ素材は、デザイン制作で利用することも多いはず。そこで今回は、アナログテイストなスタンプのPhotoshopブラシを集めた「High Quality Stamp & Post Mark Photoshop Brushes」を紹介したいと思います。
スタンダードなスタンプ素材はもちろん、レトロテイストな素材など、さまざまなPhotoshopブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
どんどんと新しいタイプが公開され続けているフリーフォント。常にチェックし、取り入れている方も多いのではないでしょうか？そんな中今回紹介するのは、最新のフリーフォント18種まとめ「18 Latest Free Fonts For Designers」です。
Toledana – Desktop Font & WebFont – YouWorkForThem
個性的なデザインのフリーフォントが18種、厳選され紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
Webサイトにはアラートメッセージが必要な場面がいくつかあります。多くはJavaScriptのアラートを使用して行われていますが、カスタムCSSとJSコードを使って簡単に表現することができます。今回は、フリーで使える10種のアラートメッセージスニペット「10 Free CSS & JS Notification Alert Code Snippets」の紹介です。
ベーシックな表現からPOPなものまで10種類が紹介されています。
詳しくは以下
前回「WEBデザイナーに役立つリンクを集めた「455 helpful links for webdesigners」」という記事で、Ajaxからブログ、CSSまでWEBデザイナーのためのリソースを集めたリンク集を紹介しましたが、今日紹介する「10 Websites with huge list 」はそういったリソース集をまとめたエントリーです。
BLUE VERTIGO | Web Design Resources Links
全部で10のリソースサイトが集められていて、designdevelopでお伝えしたものもありますが、今まで紹介したことが無いものを中心にあらためて、いくつか紹介したいと思います。
詳しくは以下
web上でユーザーの環境に左右されることなく表示することが可能なwebフォント。多くのサイトで見かけることが非常に多くなってきましたが、今回紹介するのはフリーwebフォントまとめ「23 Best Free Web Fonts Of 2014」です。
Free Font Lato by tyPoland Lukasz Dziedzic | Font Squirrel
さまざまな種類の、いろいろなシーンで活用できるwebフォントがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
