TOP  >  人工知能

Tag : 人工知能

2018年09月02日

手書きのワイヤーフレームからHTMLに自動変換してくれるMicrosoft「Sketch 2 Code」

WEBを制作する際のフローとして、まずは手書きでワイヤーフレームを設計してそれらを固めてから、実制作に移るという方は多いのではないでしょうか?今日紹介するのは、手書きのワイヤーフレームからHTMLに自動変換してくれるMicrosoft「Sketch 2 Code」です。

sketch2

こちらは、2018年8月に公開されたもので、現在はailab/Sketch2Code at master · Microsoft/ailab · GitHubにて公開されています。開発者インタビューや実際の利用シーンがまとめられた動画が公開されていましたので以下からご覧ください。

動画は以下から

(続きを読む…)

続きを読む
posted 11:40  |  
Category: Tool , WebDesign   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2018年05月25日

地図や案内図の制作に使えるロケーションアイコンセット「Free Location Icon Set」

地図などを制作する際に大切なのが、場所を示す記号やアイコン。情報量の多い地図であれば有るほど、一見して内容を把握できる記号やアイコンはとても重要なアイテムです。今回ご紹介するのは、そんなマップ制作に使えるロケーションアイコンをまとめた「Free Location Icon Set」です。

free-location-icon-set1
The Free Location Icon Set (40 Icons, SVG & PNG)

全部で40種類もの地図や場所に関わるアイコンがセットになった、便利なアイコン集です。

詳しくは以下
(続きを読む…)

続きを読む
posted 09:00  |  
Category: vector   
2015年04月14日

細かな描写が特徴 食べ物をテーマにしたアイコンセット「Foody Icons」

フード系のwebサイトなどには、お店のインテリアやメニューに合わせて、食材や料理イメージなどのデザイン要素が必要となってきます。今回はそんな時に活用できる、食べ物をテーマにしたアイコンセット「Foody Icons」を紹介したいと思います。

foodicon

細かな描写が特徴の、いろいろな種類のフードアイコンがダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:28  |  
Category: Design   
2016年04月07日

プログラムコードをスライダー形式で見せることができる「SPECTACLE-CODE-SLIDE」

プログラムについてはそれぞれのジャンルごとに様々なサイトやブログでレビューやTIPSが公開されており、ソースコード自体を記載されています。今回紹介するのは、そんなソースコードをステップごとにわかりやすく閲覧させることができる、プログラムコードをスライダー形式で見せることができる「SPECTACLE-CODE-SLIDE」です。

spec1

行数が入り、かつ色分けされたよく見る埋め込まれたコード表示のままで、ステップを追って見せることが可能です。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:53  |  
Category: Tool   
2013年01月02日

ベクターデータで利用できるシンプルなECサイト用アイコン「New e-commerce icon set 」

WEBを制作する上でユーザーエクスペリエンスを左右する。アイコンのデザイン。意図したとおりに作用すれば、言いたいこと、伝えたいことがかなりわかりやすく伝わります。今日紹介するのは、ベクターデータで利用できるシンプルなECサイト用アイコン「New e-commerce icon set 」です。

このアイコンセットはECサイト用ということで、支払いから、セール案内まで、幅広くECで重宝しそうなアイコンがまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:30  |  
Category: Design , vector   
2017年01月23日

クリエイティブな管理画面のためのインスピレーション集「20 Inspirational Dashboard Designs」

CMSなどのシステムの管理やユーザーが自らの情報を操作・管理を行う、管理画面/ダッシュボード。基本的にフロントでは表示されないため、デザインに拘らない場合も多いのですが、今日紹介するのクリエイティブな管理画面のためのインスピレーション集「20 Inspirational Dashboard Designs」です。

01-insp
iPad Dashboard

管理画面/ダッシュボードのデザイン事例が全部で20集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
2013年12月14日

もっと手軽にデザインにアクセントを!アイコンフォントのまとめ「15 Useful Free Icon Fonts for Designers」

Webサイトの修正において、細かいものであればHTMLやCSSのみで対応してしまうことがあると思います。もちろんデザインを事前に作る事は重要だと思いますが、時にはプログラムのみで解決できてしまう手軽さも必要なのではないでしょうか。今回紹介するのはそんな手軽さをより強く感じさせてくれる、アイコンフォントのまとめ「15 Useful Free Icon Fonts for Designers」です。

15ufiffd_3
Ligature Symbols

通常、HTMLに「A」と記述すれば「A」と表示されますが、アイコンフォントを使用すれば対応するアイコンが表示される仕組みとなっています。どれも扱いやすいものばかりですが、中でも気になったものをピックアップしましたので、下記よりご覧ください。

Some Random Dude — Iconic is Becoming Awesomer
ファイル関連を中心に、さまざまな種類のアイコンを収録したフォント。スタンダートな見た目なので使うシーンを選びませんね。

15ufiffd_1
 
 
 
 
 

Maki | A clean point of interest icon set from MapBox | MapBox
スポーツ関連など、Webとはあまり関係のないものが収録されたアイコンフォント。リアルと結びついたデザインに使えそうです。

15ufiffd_2
 
 
 
 
 

Modern Pictograms – The Design Office
ポップ調のアイコンが集められたフォント。子ども向けのデザインによく合いそうです。

15ufiffd_0
 

利便性からすると、全てアイコンセット内で解決する事ができるのであれば、アイコンフォントを利用するという選択肢もありそうです。

15 Useful Free Icon Fonts for Designers – DJDESIGNERLAB

続きを読む
posted 09:00  |  
Category: Design , Font , WebDesign   
2016年11月02日

VRのモチーフを集めたフリーアイコンセット「Virtual Reality Icons」

国内でもプレイステーションVRが発売され、エンターテインメントの世界でもその他業界でも注目を浴びているVR(ヴァーチャルリアリティ)の技術。今日紹介するのはそんなVRのモチーフを集めたフリーアイコンセット「Virtual Reality Icons」です。

s_Freebie_VirtualReality_800x600

かなりマニアックですが、VRHMDをかぶった人、手のひらをセンシングしているもの、全身をトラッキングしているものなどなどVRに関するアイコンが集められています。全部で12種類用意されており、収録されているアイコンは以下からご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:27  |  
Category: WebService   
2016年02月22日

スモールビジネスのwebサイトにおすすめのフリーwordpressテーマ「10 Free WordPress Themes for Small Businesses」

スモールビジネスの形態で仕事をする人が増えたこともあり、ビジネスをアピールするためのツールはさらに重要な要素となってきています。そんな中今回紹介するのは、スモールビジネスのwebサイトにおすすめのフリーwordpressテーマ「10 Free WordPress Themes for Small Businesses」です。

wordpress0226_0
West – aThemes

シンプルかつ、伝えたいことを的確・厳選してまとめられる構成のwordpressテーマが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: WordPress   
2012年04月04日

ピンク色のデザインパターンまとめ「A Collection of 130 Pretty Pink Patterns」

デザイン制作時に非常に重宝するパターン素材はいくつあっても嬉しいもの。常に気に入ったものをストックしている方も多いのではないでしょうか?そんな中今回は、ピンク色のパターンを厳選しまとめた「A Collection of 130 Pretty Pink Patterns」を紹介したいと思います。


Pattern / pink ribbon weave :: COLOURlovers

シンプルで使い勝手の良いタイプや、模様に特徴があるタイプまで、幅広いバリエーション展開が魅力です。中でも気になったものをいくつかピックアップしましたので、下記よりご覧下さい。

(続きを読む…)

続きを読む
posted 11:36  |  
Category: Design   
2018年02月17日

CSSとSVGで作るアイコンセット「Let’s make multi-colored icons」

Webサイト内でよく見かけるアイコンですが、みなさんはどのように制作しているでしょうか。IllustratorやPhotoshopを使い、JPEGやPNG形式で保存している方も多いかと思いますが、今回紹介するのは、CSSとSVGで作るアイコンセット「Let’s make multi-colored icons」です。

SVG_CSS_icon02

SVGのメリットを活用したアイコンの生成方法が分かりやすく解説されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:30  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る