WEB制作を10倍効率化するための作業別ブックマーク - ONE PERCENT DESIGN BLOG
先日、仮説思考という本を読みました。「仮説から始めれば作業量は激減する」というブックカバーの言葉に触発され、衝動買いして即効amazonで海外発送した本でしたが、効率化を意識しはじめた小生にとって、かなりの良本でしたね。 この本は思考方法についての本でしたが、作業を効率化させる、それは思考術はもちろん、周りに転がっているツールや情報を知っているか知らないかでもまた大きく変わることでしょう。 今日は、そんな「作業効率向上」に視野を当てた、小生のブックマークをご紹介いたします。 小生のTwitterアカウントでは、毎日小生のブックマークが自動投稿されるようになっているので、こちらもフォローしておいてくれると嬉しいです。 モックアップ／ワイヤーフレーム／構成書作成編 世界中のクリエイターがどういうワイヤーフレームを描いているか参考にしよう！ 18 Great Examples of Sketch
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
デザインの基礎、黄金比から大和比、第2黄金比まで - kojika17
よく黄金比という言葉を聞いたりしますが、実際にどういうものかわかっていなかったり、 デザインの当てはめ方が分からなかったりすることが多いので、簡単にまとめてみました。 貴金属比 nの場所に自然数が入り、第1貴金属比を黄金比、第2貴金属比を白銀比、第3貴金属比を青銅比といいます。 よく聞く黄金比は、貴金属比の１つです。 近似値 1.6180(約5:8) CSSで黄金比を見る 伝承では古代ギリシアから使われ始めたと言われています。 パルテノン神殿、モナリザなど数多くの建築物や美術、アートなどに使用されています。 白銀比 白銀比には、以下の2つがあります。 1:1+√2 の第2貴金属比に含まれる白銀比 1:√2 の日本で古くから使用されている白銀比(大和比) どちらも白銀比と呼ばれることが多いので、紛らわしいです。 白銀比(第2貴金属比) 近似値 1:2.414(約5:12) CSSで白銀比を見
「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 | Ginpen.com
元ネタはこちら： 少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス 細部にこだわったWebデザインって？ ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。 グラデーションを加える 1pxのラインを加える シャドウを加える ノイズを加える レタープレス効果 元の記事の実践編では、Photoshopを使った画像加工で「実践」をしているのですが、同じ（ような）事をCSS3でやってみました。 デモ 先に完成品です。WebkitとFirefoxのみ。（IEでは、新しいものでも背景がちゃんと出ません。） 「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 – jsdo.it – share JavaScript,
WEB屋が行き詰まった時、参考にすると何かが舞い降りるかもしれないサイト色々（主にデザイン系） | バンクーバーのうぇぶ屋
※煮詰まる× → 行き詰る○ なんかおもいっっきり日本語間違って使ってました。めっちゃごめんなさい＞＜ 更新が滞るとEvernote開いて整理整頓ついでに記事を書くのが日課になってしまったセナですこんにちは。 さて、数年WEB屋やってると、自分の作るものが単調になったなと思うことがたまにあります。WEBでも紙でも制作技術を学んでいた時はいろんなサイトを見て見まくって、「どうしてこんなに見やすいんだろう。」とか、「どうしてこんなに分かりやすいんだろう。」とか。そんなことを感じては、常に目にする物から何かを吸収しようと躍起になっていたものです。 何かを見る度、知る度に確実に何かを学んでいったあの感覚は、何時になっても忘れてはならないものだと常々思います。 アイデアに詰まっていたり、物づくりへの刺激が欲しい時なんかに見ると、やる気とかが舞い降りてくるかもしれません。 Dribbble クリエイタ
５０の様々なデザインのドロップシャドウ効果適用素材Photoshopファイル:phpspot開発日誌
50 curved drop shadow effects, free PSD ５０の様々なデザインのドロップシャドウ効果適用素材Photoshopファイル。 次のように、色々なドロップシャドウのデザインが収録されたPSDファイルが配布されています。 ちょっと変わったデザインの物も多く収録されているので試してみてもいいかも。 関連エントリ これは覚えておいたほうがいい！というPhotoshopのブラシ５０セット 100以上のクールなPhotoShop用ブラシがダウンロードできる「getbrushes.com」 クリエイティブでカッコいいPhotoshopブラシセット５０ 動物に関するPhotoshopブラシ色々 プロレベルのPhotoshopチュートリアル集
メイキング「NERV極秘資料 - 電力使用状況」こと技術解説 - 甘味志向＠はてな
NERV極秘資料 - 電力使用状況 先日、東京電力の電力使用状況をエヴァンゲリオン風デザインで表示するWebサイトを作ったものが、あちこちで反響を頂きました。 ねとらぼ：「NERV専用監視装置」で東電の電力状況をチェック エヴァ風サイト登場 - ITmedia NEWS NERVの一員になったつもりで節電！ エヴァ風電力使用状況メーター | ギズモード・ジャパン Twitterでは16000以上ツイート頂けたようです。 http://topsy.com/kanmisikou.net/lab/power/ こちらの、はてなブックマーク週間ランキングでもIT・コンピュータカテゴリ2位を頂きました。ありがとうございます。 http://b.hatena.ne.jp/ranking/weekly/20110321/it これだけの反響を頂きましたし、せっかくなのでWebアプリを作る工程を解説します
[CSS]わずか12個のclass名で多彩なグリッドを組み立てるCSSのフレームワーク -StackLayout
IE6をはじめ、iPhone, iPadにも対応した、可変レイアウトも固定レイアウトにも利用できる実用的で多彩なグリッドを組み立てるCSSのフレームワークを紹介します。 StackLayout デモページ：Basic Mockup [ad#ad-2] StackLayoutの主な特徴 StackLayoutの対応ブラウザ・デバイス StackLayoutで使用する12個のclass名 StackLayoutのデモ StackLayoutの使い方 StackLayoutの主な特徴 わずか12個のclass名で、コンポーネントを管理 class名は、簡単にセマンティックなものに変更可能 ネストの制限は無し floatのクリア無しで、エレメントを横列に簡単に並べることが可能 デフォルトは可変レイアウト用で、固定レイアウトにも対応 各カラムの溝の設定は簡単で、px, %の両方に対応 StackLa
forked from: jsで開閉するFAQの組み方色々 - jsdo.it - Share JavaScript, HTML5 and CSS
// forked from GeckoTang's "jsで開閉するFAQの組み方色々" http://jsdo.it/GeckoTang/2LYi $(function(){ /* * siblings()で自分以外を指定して閉じてます。 * これだとメソッドチェーンで繋げます。 * あと個人的に、答えをコピペしたい時とかあるので * 答えをクリックでhide()では無く、質問をクリックでtoggle()させてます。 * */ (function(){ var $parent = $('#test1'); var $question = $('dt',$parent); $question.click(function(){ $(this).next().toggle().siblings('dd').hide(); }); })(); }); <h1>jsで開閉するFAQの組み方色々
グラフィックデザインに役立つPhotoshopチュートリアルまとめ「30 Fresh Photoshop Tutorials for Graphic Designers」
グラフィックデザインに役立つPhotoshopチュートリアルまとめ「30 Fresh Photoshop Tutorials for Graphic Designers」 グラフィックデザインは、実際の撮影画像やイメージにさまざまな加工を加えることで仕上がっていきますが、その加工工程は完成したデザインからはなかなか分かりらないもの。今回紹介するのは、グラフィックが完成するまでの加工のチュートリアルをまとめた「30 Fresh Photoshop Tutorials for Graphic Designers」です。 Design a Dark, Super-Natural Magic Figure with Fire Element in Photoshop – PSD Vault Photoshopを活用してイメージのグラフィックに近づける加工方法が多数紹介されており、高いクオリティーを
Illustratorで作るロゴデザインチュートリアル「40 Tutorials for Outstanding Text Effects in Illustrator」
Illustratorで作るロゴデザインチュートリアル「40 Tutorials for Outstanding Text Effects in Illustrator」 企業のシンボルや、ブランディング、プロモーションなどに使用されるロゴには、個性が求められるシーンもしばしばあるかと思います。今回はそんな時に是非参考にしたい、Illustratorで作るロゴデザインチュートリアル「40 Tutorials for Outstanding Text Effects in Illustrator」を紹介したいと思います。 （Create a Mummy Text Effect In Illustrator | Vectips） Illustratorの機能を駆使し制作されたハイクオリティなロゴデザインが、チュートリアルと共に多数紹介されています。中でも特に注目したロゴをピックアップしましたの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
http://www.demortalz.com/2011/08/23/showcase-bright-color-web-designs-inspiration/
フリーで美しいCSSデザインのサイトテンプレート２０:phpspot開発日誌
新着記事
Photoshop VIP ☞ WordPressを利用したWebサイトデザイン70個＋無料テンプレートまとめ
[Webデザイン]iPhone スマートフォンサイトのデザインのまとめ | CSS Lecture
475種類の汎用に使えるフリーのアイコンセット:phpspot開発日誌
CSSで様々なアクセサリをつける装飾CSS＋ｊQuery*ホームページを作る人のネタ帳
IDEA * IDEA
