デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBを制作する際のフローとして、まずは手書きでワイヤーフレームを設計してそれらを固めてから、実制作に移るという方は多いのではないでしょうか？今日紹介するのは、手書きのワイヤーフレームからHTMLに自動変換してくれるMicrosoft「Sketch 2 Code」です。
こちらは、2018年8月に公開されたもので、現在はailab/Sketch2Code at master · Microsoft/ailab · GitHubにて公開されています。開発者インタビューや実際の利用シーンがまとめられた動画が公開されていましたので以下からご覧ください。
動画は以下から
全てのフォントの幅が同じになるように組まれた等幅フォント。文字数が同じであれば全て等しい幅に揃える事ができる、使用する局面によっては非常に利便性の高いフォントです。今回ご紹介するのは、そんな等幅フォントをフリーでダウンロードできる「20 Best Fixed Width Fonts You Can Download For Free」です。
スタンダードな書体から、美しくデザインされたものまで、様々なテイストの欧文フォントが全部で20種類紹介されています。その中から幾つか、おすすめのフォントをピックアップしましたのでご覧ください。
詳しくは以下
(さらに…)
視覚的要素の中で一番重要だと言っても過言ではない色。配色バランスを決めるのはなかなか難しく、それが2色、3色と増えることで難しさは増していくのではないでしょうか。そんな時に活用したい、便利で簡単なカラーパレット作成サイト「Color Supply」を今回は紹介したいと思います。
円形の色相環図をぐるぐると選択するだけで、バランスの良い配色パターンを生成できる、とても便利なwebツールとなっています。
詳しくは以下
デザイン制作をする際には、さまざまな素材が必要になってきますが、1からすべてを制作していると時間と手間がかかってしまうもの。今回はそんな時に利用したい、インフォグラフィック等のグラフィックデザインに活用できるフリーデータまとめ「Free Infographic Vector Graphics Design Elements」を紹介したいと思います。
Dribbble – Freebie – Vector UI Components by Balraj Chana
さまざまな種類のVector形式の素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
IE6だけに出現する「バグ」を修復するために、多くの時間が費やされている現状。今回は、いつまで、IE6対応が必要なのかを考えるための指針ともなる、現在の世界でのIE6の使用率を現した世界地図「The Internet Explorer 6 Countdown」が公開されていましたので、紹介したいと思います。
世界中でのIE6使用率もかなり低下しているように見えますが、アジア圏では、まだまだユーザーの多さも感じられる結果となっています。
詳しくは以下
インターネット上には膨大な数の素材が存在しており、時にどこから探して良いのか迷ってしまうこともあるのではないでしょうか？そんな時参考にしたい、いろいろな種類の最新フリー素材をピックアップしたまとめ「50 Free Resources for Web Designers from March 2015」を紹介したいと思います。
Dribbble – Free SVG Device Templates by Max Burnside
アイコンやフォント、ブラシ、テンプレートなど、多彩な種類の素材が厳選され、1つの記事にまとめられています。
詳しくは以下
お問い合わせなどで活躍するメールフォーム。古くから有り様々な形の物が作られていますが、今回紹介する「AjaxMail」はAjaxとPHPを使ったシンプルでスマートなメールフォームです。
「ewebのPHPメールフォーム」、「AjaxZip2.0」「AdobeSpry」「Lightview」と様々なソースコードを複合して作り上げられています。
詳しくは以下
7月に入り本格的に夏の到来を感じるこの頃。夏をテーマにしたデザインを手がける機会も増えてきたのでは無いでしょうか？今回ご紹介するのは、そんな今の時期だからこそ使いたい夏をモチーフにしたアイコンまとめ「Free Icon Sets for Summer 2018 that will Heat up Your Designs」です。
Summer Sales 50 free icons (SVG, EPS, PSD, PNG files)
デザインに夏らしさを取り入れたいときに便利な、夏を連想させるモチーフのアイコンが全部で9種類紹介されています。さらにその中からいくつかおすすめのものをピックアップしましたので、ご覧ください。
詳しくは以下
(さらに…)
画像処理ソフトは様々なものがリリースされており、WEB制作において利用されているソフトも多様にありますが、photoshopで作っていると言うWEBデザイナーさんは多いのではないでしょうか？今日紹介するのはphotoshopでWEBデザインをするためのチュートリアル「How to create an elegant web layout in Photoshop」です。
このチュートリアルはWEB制作を便利にしてくれる960 Grid Systemを利用する前提で展開されています。
詳しくは以下
オンラインの有料サービス登録時に出現するサインアップ画面。普段何気なく使用していますが、内容や値段等の分かりやすさがとても重要になってきます。そこで今回紹介するのは、サインアップのwebページデザインまとめ「Showcase of 40 Pricing Tables and Signup Pages」です。
プライスやプラン、その内容などをデザイン性を保ちながら明確に表現した例が多数収録されています。下記にいくつかピックアップしましたので、ご覧下さい。
Photoshopには様々な機能がありますが、中でも重宝されるのがブラシ機能。難しい表現も可能にしてくれるので活用している人も多いのではないでしょうか。そんな中今回は、写真やデザインにアクセントをつけたい時におすすめのフリーで使えるPhotoshopブラシ「Brushing Up: A Large Collection of Free Photoshop Brushes」を紹介したいと思います。
Ebullient| 9 Painting Brushes by desperatedeceit on DeviantArt
様々なテイストのブラシが紹介されています。中でも気になったものをいくつかピックアップしてみましたので、以下よりご覧ください。
詳しくは以下
