デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBを制作する際のフローとして、まずは手書きでワイヤーフレームを設計してそれらを固めてから、実制作に移るという方は多いのではないでしょうか？今日紹介するのは、手書きのワイヤーフレームからHTMLに自動変換してくれるMicrosoft「Sketch 2 Code」です。
こちらは、2018年8月に公開されたもので、現在はailab/Sketch2Code at master · Microsoft/ailab · GitHubにて公開されています。開発者インタビューや実際の利用シーンがまとめられた動画が公開されていましたので以下からご覧ください。
動画は以下から
デザイン制作の素材として活躍してくれるアイコン。デザイナーの方で日々ストックされている方も多いのではないでしょうか。今回はそんなストックコレクションに加えておけば活躍してくれるかも？子どもをイメージしたフリーフラットアイコンセット「Download free Childhood flat icons set」を紹介したいと思います。
赤ちゃんから幼児あたりまでの、ライフスタイルをイメージできるアイテムのアイコンがセットでダウンロードできるようになっています。
詳しくは以下
木目のテクスチャは、素材の中でも定番中の定番と言える存在。デザイナーなら誰しもが1度は使用したことがあるのではないでしょうか？そんな中今回紹介するのは、朽ちた木の質感に味のあるフリー木目ドテクスチャ「Freebie: Grungy Wood Plank Textures」です。
さまざまなテイストが存在する木目テクスチャですが、新しいきれいな雰囲気ではなく、時間が経ち自然の風合いが劣化した様子が印象的なテクスチャとなっています。
詳しくは以下
すでに広く浸透しつつあるApple Watch。とても便利で、専用アプリケーションも多数登場しています。今回はそんな市場の広がりに合わせて使用できる、いろんな表情のApple Watchモックアップ&UIキットまとめ「30 Apple Watch GUI Kits, Mock-Ups And Templates For Free」を紹介したいと思います。
Dribbble – Apple Watch Free Template PSD by Daniel Macedo
さまざまテイストのApple Watchを表現できる素材がまとめられており、非常に便利に活用することができます。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
撮影した写真をそのまま利用すると、生々しい雰囲気になってしまうことも多いと思いますが、画像処理ソフトなどで少し色味を調整するだけで、雰囲気のある画像に仕上げることができます。しかし、カラー調整はそれだけを専門に行うプロもいるほど、繊細で難しい作業。そんな中今回紹介するのが、雰囲気のあるカラー調整ができるPhotoshopアクションをまとめた「25 Awesome and Free Photoshop Actions」です。
Darker effect 5.1 by `sa-cool on deviantART
画像の雰囲気を自在にアレンジできるPhotoshopアクションが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
背景に利用することでデザインをより魅力的に見せてくれる効果を発揮するパターン素材。すでに用意されているものを使用するのも良いのですが、時には自身で作成したものでデザインを完成させたい時もあるのではないでしょうか？今回はそんな時に参考にしたい背景パターンチュートリアル集「Pattern Tutorials: 25 Background Pattern Design Tutorials & Free Patterns」を紹介したいと思います。
Create a Wallpaper with Vector Geometric Blurred Shapes in Illustrator and Photoshop
豊富なバリエーションを揃えたチュートリアル集で、ソフトのいろいろな技術等も参考にすることができそうです。
詳しくは以下
Designdevelopでは今まで様々なCSSテクニックをお伝えしてきましたが、今日紹介する「22 CSS Button Styling Tutorials and Techniques」はボタンのデザインに特化したテクニック集です。
Beautiful CSS buttons with icon set
立体的なボタンから、角丸はもちろん影がついたものなどなどCSSで作る手のこんだボタンのテップスやチュートリアルが収録されています。今日はその中からいくつかピックアップして紹介したいと思います。
詳しくは以下
前回「代表的な12のCSSレイアウトテンプレートを配布する「Nice and Free CSS Templates」」という記事でCSSで作られた基本のセットともなるテンプレート集をお伝えしましたが、今回紹介する「100 Percent Pure CSS Layouts」もそんなベースのレイアウトになりうるテンプレートを集めたCSSテンプレート集です。
名前の通り100パーセントCSSだけで作った、デザインはいっさい無しでレイアウトだけ区切っているテンプレートをひたすら集めています。
詳しくは以下
WEBを構成する要素で重要な要素の一つ、ナビゲーション。ユーザーが実際操作する所だけあってそのサイトの印象を決めると言っても過言ではない部分です。今日紹介するのはそんなシンプルなナビゲーションの素材をセットにしたPSD素材集「PSD website navigation menus set」を紹介したいと思います。
基本的には同じ構成、配置になっていますが、ナビゲーションバーの中のイメージが微妙に変わっています。
詳しくは以下
冬はクリスマスやお正月、バレンタインデーといったイベントの多くなる季節です。イベントに合わせてWebサイトやポスター、グリーティングカードなどを作る機会も増えると思います。そんな時に活躍してくれる、100種類の豊富なフリーフォントまとめ「100 Greatest Free Fonts for 2018」を今回は紹介します。
Lemon Tuesday Font | dafont.com
それぞれ違ったテイストのフォントが集約された便利なサイトです。中でも気になったものをいくつかピックアップしてみました。
詳しくは以下
デザイン制作に便利なベクター素材。イラストレーターでの加工が可能だったりと、アレンジの幅が広いのも人気の要素の一つとなっています。今回はそんなベクター素材の中で、美しい花の姿を表現した「30 Free Colorful Vector Flowers」を紹介したいと思います。
（Melody Arriving :: Vector Open Stock | vector graphics and vector art to download for free!）
さまざまな表情の花、そして植物をプラスしたベクター素材が30種まとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
