TOP  >  コーディング

Tag : コーディング

2017年04月11日

コーダーの為の実用的な色理論が学べる「Practical Color Theory for People Who Code」

Webサイトのコーディングを一手に担うコーダー。デザインに関する知識を持っているだけで、仕事の仕方も大きく変わってきます。そんな中今回ご紹介するのは、コーダー達へ向けた簡易的な色彩学を学ぶためのWebサイト「Practical Color Theory for People Who Code」です。

gGD2GtQBgu8yQAAAABJRU5ErkJggg==

色相の説明から始まりトーンオントーンなど、基礎的な知識を学ぶことができます。

詳しくは以下

(続きを読む…)

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

コピー&ペーストで気軽にクリエイティブなCSSボタンが設置できる「bttn.css」

WEBサイトのユーザーインターフェイスの中で最も重要な要素の一つボタン。主にユーザーがページ遷移や情報を取得する時に利用するため利用されます。よく目にする部分だけに、ここの動きやクリエイティブはWEBサイトのクオリティを決定づける要素の一つだと思います。今日紹介するのはコピー&ペーストで気軽にクリエイティブなCSSボタンが設置できる「bttn.css」です。

cssbt01

このbttn.cssでは様々な大きさ・色・動きがセットされており、どのボタンも簡単に実装することが可能です。

詳しくは以下

cssbt02

登録さているボタンは全部で15種類。どれもシンプルでマウスオーバーでそれぞれのボタンにあったアクションが展開されるようになっています。色ベタのものと罫線で表現されたものと絞り込んで探すことも可能です。

カスタマイズできる項目としてはカラー6種類、サイズが4種類となっています。シンプルでしかもCSSだけで制作されているので非常に使い勝手が良いと思います。ボタンデザイン・アクションで迷っている方は是非どうぞ。

Bttn.css – Demo

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

CSSとjavascriptで創る軽量な3D表現ライブラリ「voxel.css」

近年、ブラウザの発展やWEBGLなどの技術的な発展によりWEB上でも3Dを用いたクリエイティブな表現が多く取り入れられています。今日紹介するのはCSSとjavascriptで創る軽量な3D表現ライブラリ「voxel.css」です。

voxelcss02

空間上にオブジェクトを配置したり、定めた領域・面にテクスチャを貼ってオブジェクトを生成したりといった事が簡単に実現可能となっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:45  |  
Category: WebService   
このエントリーをはてなブックマークに追加
2016年12月03日

CSSのみで実現するカラフルポップなローディングアニメ「CSS PIN」

WEBサイトに欠かせないUI/UXの一つローディング。この小さなアニメーションで多くのストレスが軽減でき、かつ世界観を表現できます。ローディングアニメーションには様々な作り方がありますが、今回紹介するのはCSSのみで実現するカラフルポップなローディングアニメ「CSS PIN」です。

csspin

全部で10個のローディングアニメーションが公開されており、どれもクリエイティブでポップな印象を受けます。

詳しくは以下

(続きを読む…)

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

写真加工に使える!CSSで実現するイメージフェクト「20 Image Effects With CSS」

写真を利用する時、撮影されたまま利用するという事はソフトウェアが発達してきた現在まずありませんが、今日紹介するのはレタッチソフトでは無く、CSSで実現するイメージフェクト「20 Image Effects With CSS」です。

cssimage

水彩風から、黒板に書いた風のエッジを検出したものエアブラシで書いたものなどなど、全部で20ものエフェクトがCSSで指定するだけで簡単にエフェクトを利用することが可能です。

詳しくは以下

(続きを読む…)

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

HTMLテーブルが直感的に簡単に生成できる「DIV TABLE」

tableタグやDIVタグを利用して制作するテーブル組、それほど難しい仕組みでは無いのですが、いざ手書きをすると時間を取られたりします。今日紹介するのはHTMLテーブルが直感的に簡単に生成できるWEBジェネレーター「DIV TABLE」です。

div_table01

利用方法は非常に簡単で、tableタグで生成するかDIVタグで生成するかを選んで、あとはBorder、width、Cell Paddignを設定して、あとは欲しいテーブルサイズを選択すればタグが生成されます。

詳しくは以下

(続きを読む…)

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

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

2015年03月09日

アンティークなフレームのビジュアルを手に入れられるモックアップ「Framelicious」

デザインにアンティーク調の雰囲気を演出する際によく使用される額装等のフレーム。素材などを使用することが多いと思いますが、よりリアルな雰囲気を出すためにはいろんな素材と組み合わせたり、加工することが必要となってきます。今回はそんな加工などの必要がない、アンティークなフレームのビジュアルを手に入れられるモックアップ「Framelicious」を紹介したいと思います。

frame1

非常にハイクオリティなデザイン性のあるフレームビジュアルが4種ダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2011年09月29日

ポートフォリオ制作のアイデアソースとなる「20 Awing Portfolio Websites」

デザインや開発を行っている方にとって、作品をまとめたポートフォリオは、自分の技術やデザイン力を知ってもらう重要な手段です。そこで今回は、ポートフォリオ制作に役立つデザインやアイデアに優れたポートフォリオサイトを集めた「20 Awing Portfolio Websites」を紹介したいと思います。


Sam Dallyn – Art Direction/Design

さまざまなクリエイターが見せ方にこだわって制作したサイトが、豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2012年04月03日

プロのデザインワークスの参考に ハイクオリティなアイコンまとめ「50 Fresh Icon Sets For Developers And Designers」

WEBデザイン制作の必須アイテムとなっているアイコンは、ユーザーにコンテンツをより分かりやすく利用してもらうために、クオリティも高めていきたいもの。そこで今回紹介するのが、比較的最近発表されたクオリティの高いアイコンをまとめた「50 Fresh Icon Sets For Developers And Designers」です。


iCrea by ~draseart on deviantART

シンプルなアイコンから、ディティールにこだわったアイコンまで、さまざまなアイコンが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:23  |  
Category: Design   
2011年05月02日

シンプルに表現するwebサイトデザインまとめ「Best Minimal Web Design I Recently Bookmarked」

ネットサーフィンをしていると、表現力の優れたサイトに立ち寄ることが多くなると思います。それは表現力に優れたサイトは、クリエイティブ性やユーザビリティへの配慮が行き届いており、過ごしやすい空間になっているからではないでしょうか?そこで今回は、シンプルな表現の中に優れたwebサイトの特徴が詰まっているwebサイトデザインまとめ「Best Minimal Web Design I Recently Bookmarked」を紹介したいと思います。


Minimal-Web-Design-Inspiration

シンプルな構成の中に、行き届いた細部へのこだわりを感じるwebサイトが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2014年07月11日

細身のラインが特徴のフォントまとめ「21 Light & Ultra-Thin Fonts for Your New Designs」

フォントを使用する場所やデザイン感によって、ウェイトやフォント自体の太さを使い分けることで強弱をつけることができます。そんな中今回紹介するのは、細身のラインが特徴のフォントまとめ「21 Light & Ultra-Thin Fonts for Your New Designs」です。

font140711_3
Party at Gatsby's font by tysmagic – FontSpace

繊細なラインで構成されたデザイン性の高いフォントが多数まとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Font   
2009年09月01日

WEBマガジンのためのデザイン集「25 Magazine-Style Layouts for Your Design Inspiration」

WEBはもはやメディアの一つとして確立されたものを築き上げていて、様々な情報を伝えるメディアやWEBマガジンが個人運営、法人運営に関わらず公開されていますが、今日紹介するのはコンテンツがたっぷり詰まった、WEBマガジンのためのデザイン集「25 Magazine-Style Layouts for Your Design Inspiration」を紹介したいと思います。

webmaga01
bmi Voyager

様々なタイプのWEBマガジンのレイアウトが紹介されていますが、今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:25  |  
Category: WebDesign   
tag: webdesign
2017年10月12日

ハロウィーンに合わせて使いたいキュートなアイコンセット「Spooky Halloween: 40 Icons, 4 Styles」

ハロウィーンが間近に迫っていることもり、ハロウィーン関連のデザイン業務を手がけている方もいらっしゃるのではないでしょうか。今回はそんな方におすすめの、手軽にハロウィーンの雰囲気を演出してくれるキュートなアイコンセット「Spooky Halloween: 40 Icons, 4 Styles」を紹介します。

spooky-halloween-40-icons1

シンプルなデザインで非常に使いやすい、ハロウィーンをモチーフとしたアイコンセット全40種類です。

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

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

シームレスに使用できる木目テクスチャまとめ「Best Free Seamless Wood Plank Textures」

継ぎ目なく、シームレスに使うことのできるパターン素材はとても重宝する存在。作業効率もアップさせることができたりと、なにかと活躍してくれます。そんな中今回紹介するのは、シームレスに使用できる木目テクスチャまとめ「Best Free Seamless Wood Plank Textures」です。

woos1
Bright Wooden Floor Texture [Tileable | 2048x2048] by FabooGuy on deviantART

さまざまな雰囲気を持った木の板をつなぎ合わせたテクスチャの、いろいろなテイストのものを厳選し紹介しています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

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

HTML5の12の事例「12 Fun & Clever Examples of HTML5」

ロゴも策定されWEB業界では徐々に浸透しつつあるHTML5ですが、今までのHTMLでは表現できない、ものが多々、可能になっていて、クリエイティブの面、機能面でも期待されていますが、今日紹介するのはHTML5の機能を使った事例を集めたエントリー「12 Fun & Clever Examples of HTML5」です。


Darkroom

アニメーションを用いたものから、3D表現、ゲームなどなど、いままでFLASHなどでしか再現できなかったものがHTML5で描かれています。今日は其のナッからいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:14  |  
Category: WebDesign   
2007年10月21日

WordPressの管理画面のUIを改善してくれるプラグイン「Admin Dropdown Menu」

WordPressの管理画面のユーザーインターフェイスはタブ形式になっていて、分かりにくいとまでは行かないのですが、個人的には直観的に把握できない感じがします。そこで今回紹介するのは管理画面のメニューを分かりやすいドロップダウンメニューにしてくれる「Admin Drop Down Menus」です。

Admin Dropdown Menu

プラグインを多く導入していると設定などは特に横にメニューが広がってしまうと言ったこともこちらのプラグインを使う事で一つにまとまり見易くなります。デザイン的にもスッキリとまとまった感じがするので印象も良くなるかと思います。

インストール方法

1.「Admin Drop Down Menus」からプラグインをダウンロード

2.解凍後「advanced-admin-menus」のフォルダを「wp-content/plugins/」へアップロード

3.管理画面からプラグインを有効化

以上です。

ディフォルトのメニューも毎日使っていればメニューも違和感無く使えるようにはなりますが、毎日使うものだからこそ少しでも便利にしたいもの。WordPressのメニューにご不満な方は是非試してみてください。

続きを読む
posted 02:20  |  
Category: plugin , WordPress   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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