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   
このエントリーをはてなブックマークに追加

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

2014年07月28日

さまざまなデザインシーンで活躍してくれるブラシを紹介した「20 Free High Resolution Photoshop Brush Packs」

Photoshopの中でも特に便利で手軽に利用できるツール、ブラシ。デザイナーの方でよく利用されているという方も多いのではないでしょうか?そんな中今回紹介するのは、さまざまなデザインシーンで活躍してくれるブラシを紹介した「20 Free High Resolution Photoshop Brush Packs」です。

brush0728_1
High Res Nebula Galaxies & Star Brushes (Free) | Free Brush Archive

使いやすい種類のPhotoshopブラシがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 09:28  |  
Category: Photoshop   
2015年11月08日

アプリアイコンを手軽かつハイクオリティに仕上げることができるジェネレーター「App Icon Generator」

スマートフォンアプリなどのアイコンは、UIの中で目に留まる・またデザイン的に魅力的で分かりやすくすることがとても重要。いつもデザインに苦戦されているというデザイナーの方は少なくないのではないでしょうか?そんな中今回紹介するのは、アプリアイコンを手軽かつハイクオリティに仕上げることができるジェネレーター「App Icon Generator」です。

appicon1

用意されたベースを組み合わせていくことで、簡単にデザイン性のあるアプリアイコンを作り上げることができます。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Tool   
2009年08月28日

jQueryで実現する3Dエフェクト集「9 Best jQuery 3D Effect Plugins」

軽量で高機能なjavascriptライブラリとして様々なWEBで導入されているjQuery。非常に高機能で様々なエフェクトや動作を実現できますが、今回紹介するのはjQueryで実現する3Dエフェクト集「9 Best jQuery 3D Effect Plugins」です。

3deff01
5. jQuery faux-3D effect

jQueryで動作するエフェクトの中でもフリップで動作するものや奥行きのあるシーンを実現するなど様々な3Dエフェクトが収録されています。今回はその中から特に気になったものをいくつかプックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 03:36  |  
Category: WebDesign   
tag: 
2016年01月18日

バレンタインのデザインに活用したい スタンプ風アイコンセット「Valentine & Love Postage Stamp Icon Set」

お正月が終わるとすでに世間はバレンタイン商戦。デザイン業界でも関連するツールを手がけている方も多いと思います。そんな中今回紹介するのは、バレンタインのデザインに活用したい スタンプ風アイコンセット「Valentine & Love Postage Stamp Icon Set」です。

valentinepost

バレンタインイメージのデザインにぴったりな、可愛らしい切手風のデザインが特徴のアイコンをセットでダウンロードすることができます。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2013年03月12日

感光したフィルムの雰囲気が再現できるテクスチャパック「Free Light Leak Texture Pack To Retrofy Your Photos」

デジタルカメラで撮影した美しい写真を、今では誰もが手軽に撮影できるようになっていますが、フィルムを使用した撮影はより難しいものとなってきています。しかし、フィルムで撮影された写真の美しさノスタルジックな雰囲気というのは、アナログならではの良さがあるのではないでしょうか?今回はそんなアナログ撮影のような雰囲気を再現できるテクスチャパック「Free Light Leak Texture Pack To Retrofy Your Photos」を紹介したいと思います。

デジタルカメラで撮影した写真に、フィルムが感光してしまったような加工できるテクスチャが15枚セットになったテクスチャパックです。

詳しくは以下

(さらに…)

続きを読む
posted 03:26  |  
Category: Design   
2013年05月25日

フラットデザインをオーダーされたデザイナーのためのデザインインスピレーション「Flat Design Inspiration」

今年はフラットデザインがWEBのトレンドとして、多くのクリエイティブブログで伝えられています。windows8を始めとして、OS側のユーザーインターフェイス側にも取り入れられ、今後ますます、目にする機会も多くなってくると思います。今日紹介するのはフラットデザインをオーダーされたデザイナーのためのフラットデザインをオーダーされたデザイナーのためのデザインインスピレーション「Flat Design Inspiration」です。

今回はWEB側とスマートフォンUIをそれぞれ取り上げているエントリーから気になったものをまとめて紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
2016年11月19日

ブランディングツールのモックアップ制作におすすめのフリー素材「20 Professional Free Branding Mockups」

企業などのブランディングツールを制作する時に、途中経過でイメージを確認したい・どんな風にツールに展開されるのか知りたい、そんなシーンもあるのではないでしょうか?今回はそんなシーンで活用したい、ブランディングツールのモックアップ制作におすすめのフリー素材「20 Professional Free Branding Mockups」を紹介します。

mock1119_1
Branding / Identity MockUp Vol.7 | GraphicBurger

さまざまな種類のツールをリアルに配置したモックアップ素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 03:32  |  
Category: Design   
2015年02月15日

ボールド系・見た目に印象的なフリーフォントが揃った「40 Free Beefy And Bold Fonts You Should Grab」

フォントは太さや全体のバランスによって、見た目の印象やインパクトがかなり変わってくるもの。目を引きたい、デザインを強調したい時には太めのフォントが有効です。今回はそんな時に使用したい、ボールド系・見た目に印象的なフリーフォントが揃った「40 Free Beefy And Bold Fonts You Should Grab」を紹介したいと思います。

boldfont1
Sail Font · 1001 Fonts

比較的太さがあったり、しっかりとした形をしているなど、デザインを力強く演出してくれそうなフォントが紹介されています。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Font   
2007年11月15日

仕上がりを見ながらFavicon制作できる「favikon」

Faviconを作成してくれるサービスはかなりの数がリリースされていますが今回紹介する「Download Favicon」は画像を見ながら、トリミングしてFaviconが作れる画期的なサービスです。

トリミングしてfaviconを作成できるfavikon

従来のFaviconジェネレーター系のサービスだと横長の画像だと間延びしてしまったりおかしくなってしまいますが、上記のように自分でトリミングしながら仕上がりを決められるため、どんな画像からもFaviconを作ることができます。

詳しくは以下

(さらに…)

続きを読む
posted 01:57  |  
Category: WebService   
2017年05月29日

個性あふれるフォルムが特徴 デザイン性のあるフリーフォントまとめ「20 Best Free Fonts on Behance」

写真やグラフィックだけでは与えられない、個性やインパクトを添えてくれるフォント。多くの形が存在していますが、今回は独創的な形状を持つフォントに焦点をあてた「20 Best Free Fonts on Behance」を紹介したいと思います。

20 Best Free Fonts on Behance-top
BUFFALO – FREE SCRIPT FONT on Behance

手描きからクラシカル、ユニークな雰囲気など、独特さを兼ね備えたフォントデザインが20種類まとめられています。気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Font   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る