TOP  >  コード

Tag : コード

2018年12月01日

自然の風景を表現したコードスニペットまとめ「10 Beautiful Nature Inspired Code Snippets」

デザインの主役となるコンテンツを考えるとき、簡単に取り入れることができるコードスニペットがあると便利ですよね。今回は、デザインをカスタマイズするときに役立つコードスニペットまとめ「10 Beautiful Nature Inspired Code Snippets」を紹介します。

gazou1
Pure CSS Jellyfish

自然の風景をテーマにHTMLやCSS、JavaScriptで作られたコードスニペットがまとめられています。気になったものをいくつかピックアップしましたので、下記からご覧ください。

詳しくは以下
(さらに…)

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

WebデザインをオンラインでサポートしてくれるCSS作成オンラインツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」

Webデザインを構築するのに欠かせないCSS。基礎からアニメーションなどの特殊な効果まで、様々なことが行なえます。今回ご紹介するのは、そんなCSS構築の作業を手助けしてくれる、便利なWebツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」です。

40-free-web-based-tools
Palettes | Flat UI Colors 280 handpicked colors ready for COPY & PASTE

オンライン上で手軽に様々な効果や設定を試し、導入することができるツールが40種類紹介されています。その中から幾つかおすすめのツールをピックアップしましたのでご覧ください。

詳しくは以下

40-free-web-based-tools3
Clippy — CSS clip-path maker
Clippyは画像を切り抜くフレームの形を自由に調整することができるWebツールです。星や丸などベースとなる図形を27種類の中から選ぶことが出来、自由に編集できます。
 
 
 
40-free-web-based-tools1
CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs
トレンドのグラデーションをCSSで表現できるWebツールです。背景にグラデーションを使いたいときなど、大きい面積でグラデーションを取り入れたいときに。
 
 
 
40-free-web-based-tools2
Trianglify.io · Low Poly Pattern Generator
流行のポリゴングラフィックをCSSで表現するためのツールです。目の細かさや角度、色味などをカスタマイズでき自由度も高いです。
 
 
最適なツールを利用することで、クオリティの高いコーディングを短時間で完結することができます。サイトには他にも活用する機会の多いWebツールが多数紹介されていますので、興味をお持ちになられた方は是非下記リンク先よりご覧になってみてください。

40 Free Web-Based Tools & Apps for Working With CSS

続きを読む
このエントリーをはてなブックマークに追加
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年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月17日

各要素ごとのデザインから各コードまで参照できるデザイン集「CodePen Design Patterns」

開発する上で重要なのが各種要素の動きや挙動、見た目だけではなくて、動きもクオリティに大きく関わってきます。今日紹介するのは各要素ごとのデザインサンプル・HTML・CSS・JSのコードまで参照することができるデザイン集「CodePen Design Patterns」です。

codepen

アコーディオン・メニューアイコン、タブ、ドロップメニュー、ローディングといった、WEBサイトのインターフェイスを構成する上で重要な要素ごとにまとめられています。

詳しくは以下

(さらに…)

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

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

2018年08月22日

デザインに取り入れたい ハイクオリティなフリーフォントまとめ「30 New Truly High Quality Free Fonts for Designers」

デザインの仕上がりを左右する重要な要素はいくつか挙げられますが、中でもフォントは慎重に選び、デザインとマッチさせたいもの。今回はそんなときにぜひ参考にしたい、ハイクオリティなフリーフォントまとめ「30 New Truly High Quality Free Fonts for Designers」を紹介します。

font0820_2
Freebies | Wacaksara

30種のデザイン性のあるフォントがまとめられており、どれも非常に魅力的なものばかり。気になったものをピックアップしてみましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: Font   
2011年02月03日

最近リリースされたクリエイティブなHTML+CSSのテンプレート「25 Fresh and Professional CSS and HTML Templates」

HTML5やCSS3などの次世代の企画も徐々に業界内では浸透してきていますが、まだまだ商業ベースでは特定の用途を除いては使えないシーンも多く、HTML+CSSを用いて制作をしている人がほとんどだと思います。今日紹介するのは最近リリースされたクリエイティブなHTML+CSSのテンプレート「25 Fresh and Professional CSS and HTML Templates」です。


25 Fresh and Professional CSS and HTML Templates

様々なテンプレートがまとめられています。今日はそのなかからいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 11:52  |  
Category: WebDesign   
2011年02月07日

黒をベースとしたクールなパッケージデザイン「Great Black Package Design」

商品の購買意欲を誘うのに需要な役割を果たすパッケージデザイン。商品の種類やターゲット層、ブランドイメージの構築なども含め、カラーリングのチョイスもとても大切だと思います。そこで今回紹介するのは、黒をベースとしたクールなパッケージデザイン「Great Black Package Design」です。


Organ Studio Christmas Gift : Lovely Package® . Curating the very best packaging design.

スタイリッシュなイメージも持ち合わせたブラックを上手に使い、商品の魅力を最大限に引き出したクオリティの高いパッケージデザインが紹介されています。まとめの中からいくつか選んでみましたので、以下よりご覧ください。

(さらに…)

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

新しいクリエイティブなフリーフォント集「9 Fresh Free Fonts for your Projects」

デザインする上でフォントはデザイナーの大きな武器となりえます。それだけに使えるフォントを探しているという方も多いと思います。今日紹介するのは、最近リリースされたクリエイティブなフリーフォント集「9 Fresh Free Fonts for your Projects」です。


Sonar

全部で9のフォントがまとめられていますが、今日はそのなかから幾つか気になったフォントを紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design , Font   
2011年07月17日

jQueryコンテンツスライダー15選「15 jQuery Space-Saving Content Sliders and Carousels」

Flashに替わって、avascriptでコンテンツづくりをする事も多くなってきたと思いますが、今回紹介するのはjQueryで制作する、コンテンツスライダーを集めたjQueryコンテンツスライダー15選「15 jQuery Space-Saving Content Sliders and Carousels」です。


dualSlider

写真がメインのもの、動画含めてスライドするスライダー、文章を中心に見せるものなど、あらゆる種類のコンテンツスライダーが紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 02:51  |  
Category: WebDesign   
2015年06月22日

幾何学的にデザインされたフリーフォント「20 Gorgeous Free Geometric Fonts to Download」

さまざまなテイストのデザインフォントが展開されており、いろいろな種類をストックされている方も多いかと思います。そんな中今回紹介するのは、幾何学的にデザインされたフリーフォント「20 Gorgeous Free Geometric Fonts to Download」です。

geometricfonts1
PIER SANS // FREE TYPEFACE with 4 New Styles on Behance

幾何学的とありますが、シンプルなテイストをベースに個性が演出されたフォントが揃っています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 11:16  |  
Category: Font   
2016年01月22日

履歴書作成をもっとクリエイティブにしてくれるフリーテンプレート集「Free Professional CV/Resume and Cover Letter PSD Templates」

就職活動をする時に必ずといって良いほど必要になってくる履歴書。一般的には、無難なフォーマット化された用紙に記入することがほとんどだと思いますが、今回は履歴書でクリエイティブ性をアピールしたい時におすすめなフリーテンプレート集「Free Professional CV/Resume and Cover Letter PSD Templates」を紹介したいと思います。

resume0123_0
Resume templates — Яндекс.Диск

特に、アート・デザイン・クリエイティブ系の就職活動をされる方におすすめの、今までにないデザイン性の高い履歴書テンプレートが揃っています。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2018年01月24日

テンプレートからアクションまで デザインに使えるフリーのPSD素材まとめ「30 New Useful Free Photoshop PSD Files for Graphic Designers」

デザイン業務の時短やコスト削減など、いざという時に役立ってくれるのがテンプレートやアクションなどの素材。そんな使えるデザイン素材は、常に最新のものを手に入れておきたいものです。そんな中今回ご紹介するのは、そんな使える最新のPSD素材をまとめた「30 New Useful Free Photoshop PSD Files for Graphic Designers」です。

30-new-useful-free-photoshop1
30 New Useful Free Photoshop PSD Files for Graphic Designers | Freebies | Graphic Design Junction

紙からWEBまで広く使えるPSD形式のテンプレートやアクションが、30種類まとめられています。さらにその中から気になった素材を幾つかピックアップしましたのでご覧ください。

詳しくは以下

(さらに…)

続きを読む
2010年12月07日

さまざまなテイストのアイコンをまとめた「Top 50 Web Development, Design and Application Icon Sets from 2010」

webデザイン制作の際には特によく使用するアイコン。テイストに合わせて、バリエーションを揃えておきたいものです。そこで今回紹介するは、さまざまなテイストのアイコンをまとめた「Top 50 Web Development, Design and Application Icon Sets from 2010」です。


200+ Exclusive Free Icons: “Reflection” | Webdesigner Depot

デザインの雰囲気はもちろん、それぞれにテーマ性を持ったアイコン集が多数収録されています。気になったものをいくつかピックアップしましたので、下記よりご覧ください。

(さらに…)

続きを読む
posted 02:04  |  
Category: Design   
2008年02月22日

ベクターデータ、photoshopブラシなどクリエイティブな素材を集めた「Pixlpusher」

先日「様々なベクターデータやデザインに役立つ素材を配布する「Dezignus.com」」という記事で、様々なベクターデータ、photoshopブラシなどクリエイティブな素材を扱っているブログを紹介しましたが、今日紹介するのもそんな素材を配布してくれているブログ「Pixlpusher」です。

ベクターデータ

まだ数は少ないのですが、様々な素材を公開されています。今日はその中からいくつかピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 12:01  |  
Category: Design , Photoshop , vector   
tag: Design vector

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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