TOP  >  ソース

Tag : ソース

2017年08月09日

こんにちは!貴方の名前は?など、チャットのように会話できるUI「BotUI」

LINEなどでお馴染みのチャットのユーザーインターフェイス。メールに代わるコミュニケーションツールとして台頭し、多くのサービスで取り入れられているチャット。今回ご紹介するのは、そんなチャットのユーザーインターフェイスを実現できる「BotUI」です。

botui_1

動作のイメージや動きなどについては、BotUI – A JavaScript framework to build conversational UIs.
からご覧いただくことが可能です。

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

続きを読む
posted 08:30  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加
2017年08月03日

Webデザインをよりクリエイティブにみせてくれる 複数写真の同時切り替えが可能なグリットスライドショー「CSS Grid Layout Slideshow」

Web上で写真を見せる定番の手法のひとつ、スライドショー。コンテンツを見せるのに利用したり、メインビジュアルに利用したり…とても活用幅が広く便利な存在です。今回ご紹介するのはそんなスライダーを、よりクリエイティブに見せてくれる変則的なスライドショー「CSS Grid Layout Slideshow」です。

gridLayout-slideshow02

グリット上に並べられた複数のイメージを、一気に切り替えることができる美しいスライドショーのフリーCSSソースです。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2017年07月18日

プログラマーのためのWEBサービスや開発系のアイコンセット「devicon」

Twitterなどの有名なアイコンは、自分がよく使用するものはストックとして持っているかもしれませんが、必要時にない場合は探すことになり、非常に手間を感じるのではないでしょうか。そんな手間を省いてくれる「devicon」を今回はご紹介します。

devicon

デベロッパーが持っておくと便利なアイコンが多数まとめられており、ソースコードも記載してくれている優秀なアイコンセットになります。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Tool , WebDesign   
このエントリーをはてなブックマークに追加
2017年05月02日

スクロールで変化する、美しいWebGLを実装する為のソース「WebGL Scroll Spiral」

WEB上で3Dアニメーションやオブジェクトを表示できる技術WebGL。今回ご紹介するのはそんなWebGLを使った、美しいマウススクロールアニメーションをまとめた「WebGL Scroll Spiral」です。

WebGLScrollSpiral_1

万華鏡のような美しいデザインから、抽象的なモーショングラフィックまで多様なデザイン、全8種類のデモを公開しています。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2017年03月24日

100種の無料HTML / CSSテーマがまとめられた「Best of 2016: 100 Free HTML/CSS Themes」

プログラムを組むと一言で言っても、内容は幅広く、多くの知識と技術が必要不可欠です。そんな中今回紹介するのは、時間短縮できる無料のツールをまとめた「Best of 2016: 100 Free HTML/CSS Themes」です。

app-landing-page01
GitHub – BlackrockDigital/startbootstrap-new-age: A web app landing page theme created by Start Bootstrap

できるだけ短時間でウェブサイト制作が必要とされる場合や、手順のかかるプログラムを素早くこなしたい時に役立つツールが、数多く紹介されていますのでご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Tool   
このエントリーをはてなブックマークに追加
2016年04月07日

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

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

spec1

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

詳しくは以下

(続きを読む…)

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

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

2016年09月25日

CSS3で実現するラジオボタンアニメーション「radiobox css」

WEB上で何かを選択するときに用いるラジオボタン。様々な場所で実装されており、もはや当たり前のユーザーインターフェースの一つですが、今回紹介するのはそんなラジオボタンにアクセントを付けることができる、CSS3で実現するラジオボタンアニメーション「radiobox css」です。

radio01

ラジオボタンの選択時に特定のアニメーションをラジオボタン自体にかける事が可能です。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:20  |  
Category: WebDesign   
2017年07月19日

ワイヤーを制作する時に必ず役に立つまとめ「10 Free & Latest Wireframe Tools and Templates」

デザインをする上で欠かすことのできないワイヤー制作。設計の基礎となるものであり、制作の方針をディレクターに伝えるためのものでもあります。デザイン業務に必ず組み込まれているものだからこそ、便利なツールを使用すれば業務がスムーズになるはず。そんな中今回は、知っていれば業務が楽になるまとめ「10 Free & Latest Wireframe Tools and Templates」をご紹介していきます。

JustInMind_top
Prototyping tool for web and mobile apps – Justinmind

ワイヤー制作を楽に行えるようになるツールがまとめられています。下記にいくつかピックアップしているのでご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Tool   
2007年11月14日

透明プレートメニューがせり出てくるドック型メニュー「Webber 2.0 Dock Menu」

CSSとJavaScriptで作られた、動きのあるシンプルなドック型メニュー「Webber 2.0 Dock Menu」を紹介したいと思います。

webber20dockmenu.jpg

こちらのメニューは透明のプレートが上から出てくるタイプのメニューで、使われている画像が透明なのでサイトに重なりができ、サイトに奥行きをあたえることができます。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:46  |  
Category: WebDesign   
tag: webdesign
2008年04月25日

高解像度+商用利用可のテクスチャ用画像配布サイト「freetextures.org」

デザインの質感を作って上で欠かせないテクスチャ画像。DesignDevelopでも今まで「2〜5Mの高画質・高解像度のフリーテクスチャ配布サイト「texturez.com」」や「最大2560×1920の高解像度テクスチャを無料配布する「Mayang’s Free Textures」」といくつか紹介してきましたが、今回紹介するのは高解像度+商用利用可というかなり好条件のテクスチャ用画像配布サイト「freetextures.org」です。


配布されているテクスチャ画像の一例

木の年輪、緑、石、空、汚れた壁といった定番のテクスチャ素材がカテゴリーに分かれ数多く配布されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:03  |  
Category: Design   
tag: Design
2011年07月15日

クオリティの高い金属テクスチャ素材集「High Quality Metal Textures You Would Download」

ハードなイメージを表現する時に効果的な金属テクスチャ。独特の錆具合や汚れ具合などイメージ通りのテクスチャを探し出すことができれば、世界観をより一層つくりあげることができます。そこで今回紹介するのが、さまざまな金属テクスチャ素材を集めた「High Quality Metal Textures You Would Download」です。


Grunge Textures – Manhole Cover #1134 – Free Stock Photo

金属の輝きが美しいテクスチャから、使い込まれた独特の風合いを持つテクスチャまで、さまざまなテクスチャが紹介されています。今回はその中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2011年06月20日

特徴的なデザインのECwebサイト集「25 Ecommerce Web Design Inspiration」

多くの製品がインターネット上で購入できるようになっており、ネットショッピングを利用したことがあるという方も多いと思います。ECサイトデザインの原則の一つとして、アイテムの見やすさと購入のしやすさが求められますが、今回がデザイン性も重視したECwebサイト集「25 Ecommerce Web Design Inspiration」です。


Custom Plastic Bags & Reusable Bags – Custom Bags HQ

ファッションを扱うデザイン力の高さを感じるサイトから、個性溢れるオンラインギャラリーサイトまで、さまざまなECサイトが紹介されています。中でも気になったサイトをいくつかピックアップしましたので以下からご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:26  |  
Category: WebDesign   
tag: 
2016年04月10日

さまざまなテーマのフリーアイコンセットを集めた「Best Free Icons For Web And User Interface Design」

非常にさまざまなシーンで活躍してくれるアイコン。たくさん種類をストックしておくと、いざという時とても便利です。そんな中今回紹介するのは、さまざまなテーマのフリーアイコンセットを集めた「Best Free Icons For Web And User Interface Design」です。

icon0410_5
20 Free Square Icons by Krafted – Dribbble

魅力的なデザインのアイコンセットが多数まとめられており、個性的なものがピックアップされているのも特徴。気になったものを以下よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2017年11月11日

ECサイト運用のための便利なサービス14選「14 Best ECommerce Options for Designers」

年齢を問わずさまざまな人たちが利用するネットショッピング。クリック1つで簡単注文できるのでとても便利ですが、使いやすさが追求されたサイトを一から構築していくのはとても大変な作業です。そんな時に参考にしたい、多くの人が活用するECサイト運用のための便利なサービス14選「14 Best ECommerce Options for Designers」を今回は紹介します。

ECommerce01
eCommerce Open Source | Free eCommerce Website | Magento

用途に合わせて活用できるアイテムが揃っています。気になったものをいくつかピックアップしましたので、以下よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2007年11月29日

サイト構築に便利な超シンプルなアイコン集「Free Website Icons」

サイトを構築する上でインターフェイスを向上させたりデザインのアクセスには欠かせないアイコン。今日紹介する「Free Website Icons」はサイトで良く使用する「ホーム」「サーチ」「メール」などのスタンダードなアイコンを配布されています。

シンプルなアイコン集

上記が配布されているアイコンです。どんなサイトでも全体的なデザインを邪魔しないかなりシンプルなものになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:28  |  
Category: WebDesign   
tag: 
2011年02月12日

デザイン性に優れたワインラベルのデザイン集「50 Exquisite Wine Label Design Samples」

豊富な種類が展開されるワイン、それぞれの個性を表現しているかのように、ラベルのデザインも様々です。そこで今回紹介するのは、デザイン性に優れたワインラベルのデザイン集「50 Exquisite Wine Label Design Samples」です。

ボトル自体は通常のタイプがほとんどですが、ラベルに注目して見てみるととてもクリエイティブ要素の高いものが数多くリリースされているのが分かります。紹介されている物の中からいくつか気になったものをピックアップしてみましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:16  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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