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

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

2018年09月20日

トレンドの配色をカラーコード付きで参照できる「Trendy Palettes」

デザインの印象を決定付ける、重要な要素の一つに配色があります。色の組み合わせは思っている以上に難しく、いつも同じような配色になってしまう、または配色自体が思いつかないと色で悩んでいる方も多いと思います。今回紹介するのはトレンドの配色をカラーコード付きで参照できるWEBサイト「Trendy Palettes」です。

colorpare00

基本的には三色の組み合わせパターンが登録されており、色の組み合わせとそれぞれのカラーのカラーコードを参照することが可能です。

詳しくは以下

(さらに…)

続きを読む
posted 09:30  |  
Category: Design , WebDesign , WebService   
2012年04月19日

さまざまなデザインと出会える、Photoshopで制作されたタグと表の素材まとめ「45 High-Quality and Free Pricing Tags and Tables in PSD」

プライスタグやブランドタグをモチーフとした素材、またスペックなどを記載する表は、特にオンラインショップなどのデザイン時に役立ってくれます。そんな中今回は、Photoshopを利用して製作された表現力の豊かなタグと表の素材をまとめた「45 High-Quality and Free Pricing Tags and Tables in PSD」を紹介したいと思います。


Pricing table – psdchest

素材感を楽しめるクオリティの高いタグと表の素材が、豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

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

【商用可】フラットデザインを取り入れたファイルアイコンのセット「FILE TYPE ICONS with Flat Design Style」

最近流行のフラットデザイン。目新しさに加えて、ファイルサイズも小さくなるのでスマートフォンなどの端末に適していると言われています。今回紹介するのは、そんなフラットデザインを取り入れたさまざまな拡張子のファイルアイコンセット「FILE TYPE ICONS with Flat Design Style」です。

ftiwfds_0

Microsoft WordやXLSに代表される一般的な拡張子のファイルや、Photoshop、Illustratorといった、制作系で使われるファイルが数多く取り揃えられています。

(さらに…)

続きを読む
posted 09:00  |  
Category: Design , Photoshop , vector   
2012年12月22日

花火を簡単に再現できるphotoshopブラシセット30「30 Brilliant Photoshop Fireworks Brushes」

写真補正から、グラフィック制作まで幅広い用途で利用されているphotoshop。多くの方が利用しているソフトだけに、素材やブラシ等も豊富で、質の高いものが数多くリリースされています。今日紹介するのは、そんなphotoshopで利用できる花火を簡単に再現できるphotoshopブラシセットを集めたエントリー「30 Brilliant Photoshop Fireworks Brushes」です。


Firework Brushes by DoaC-Res – 8 firework brushes compatible with PS 7 and CS.

全部で30もの花火ブラシが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
2015年06月18日

HTML5のフリーレスポンシブテンプレート「50 Free Responsive HTML5 Web Templates」

webサイトを制作する際には、デザインだけでなく全体の構成などの設計が必要となってきます。しかしコストや時間の関係でなかなか思ったようにデザインできないこともあるのではないでしょうか?そんな時に参考にしたい、HTML5のフリーレスポンシブテンプレート「50 Free Responsive HTML5 Web Templates」を紹介したいと思います。

html5_0618_1
Cafe & Restaurant Free Website Templates

レスポンシブで、スマートフォンやタブレットに自動対応した、ハイクオリティなテンプレートが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2014年06月05日

リアルなテイストのテクスチャやオブジェクト制作のためのチュートリアル「27 Tutorials for Creating Realistic Textures & Objects in Photoshop」

実物により近い描写はPhotoshopで制作することが可能ですが、技術や方法がわからないと非常に難しく時間がかかってしまうもの。そんな時是非参考にしたい、リアルなテイストのテクスチャやオブジェクト制作のためのチュートリアル「27 Tutorials for Creating Realistic Textures & Objects in Photoshop」を今回は紹介します。

tutorials140605_1
Create an Address Book Icon in Photoshop – Tuts+ Design & Illustration Tutorial

本物を思わせるリアルテイストなオブジェクト・テクスチャをPhotoshopで作り出す方法・手順が丁寧に紹介されています。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Photoshop   
2017年06月10日

最新トレンドのスタイリッシュなデザインアイコンまとめ「10 Fresh Icon Designs For Free Download」

情報を視覚的に分かりやすくしてくれるアイコンは、適切なものを使い分けていきたいですもの。そのためには種類豊富にストックしておくことが大切です。そんなときにあると便利なアイコンのまとめ「10 Fresh Icon Designs For Free Download」を今回は紹介したいと思います。

icondesigns-top
Free Line Icon Set for Designers (AI, EPS, SVG, PNG)

さまざまなテーマで制作されたアイコンがまとめられています。気になったものをピックアップしましたので、以下よリご覧ください。

詳しくは以下

(さらに…)

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

様々な紙のテクスチャセットをひたすら集めた「150+ Free Paper Textures for your Next Design」

テクスチャの中でも汎用性がありもっとも使いやすい素材の一つ、紙のテクスチャ。紙といっても柔らかい印象のものからハードな印象のものまで、様々なものがありますが今日紹介するエントリー「150+ Free Paper Textures for your Next Design」は紙をテーマにあらゆる紙のテクスチャを集めています。

paper_txt_01
Paper Bag Texture Pack

様々なセットが公開されていますが、今日はその中からいくつか気になったテクスチャセットをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 10:14  |  
Category: Design , Photoshop   
2015年04月08日

深い海の中のビジュアルを作成するためのチュートリアル集「A Set Of Helpful Underwater Photoshop Tutorials」

深い深海の風景はとても神聖なもののように感じられますが、実際にデザインで自作で表現しようと思うと、高い技術が要求されるもの。今回はそんな時に参考にしたい、深い海の中のビジュアルを作成するためのチュートリアル集「A Set Of Helpful Underwater Photoshop Tutorials」を紹介したいと思います。

underwater1
Simple Underwater Scene in Photoshop | Abduzeedo Design Inspiration

水々しい質感と、深い海の底のイメージをリアルに表現できるPhotoshopチュートリアルが公開されています。

詳しくは以下

(さらに…)

続きを読む
posted 01:30  |  
Category: Design   
2017年04月22日

背景にインパクトを与えよう、美しい高解像度フリー塗り壁テクスチャ「50+ Free Hi-Res Painted Wall Textures」

年月が経つと味わい深くなる、ペンキなどで塗られた塗り壁には一言で表せない魅了があるような気がします。そんな壁をテーマにしたテクスチャを多くまとめた「50+ Free Hi-Res Painted Wall Textures」を今回は紹介いたします。

top
T. Thyneテクスチャストックby redwolf518stock on DeviantArt

どこか色が欠けていたり、かすれていたりと、個性的な塗り壁ばかりがまとめられています。その中でも気になったものをいくつかピックアップしてみましたので下記よりご覧下さい。

詳しくは以下

(さらに…)

続きを読む

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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