WEB制作を10倍効率化するための作業別ブックマーク

July 26, 2010

先日、仮説思考という本を読みました。「仮説から始めれば作業量は激減する」というブックカバーの言葉に触発され、衝動買いして即効amazonで海外発送した本でしたが、効率化を意識しはじめた小生にとって、かなりの良本でしたね。

この本は思考方法についての本でしたが、作業を効率化させる、それは思考術はもちろん、周りに転がっているツールや情報を知っているか知らないかでもまた大きく変わることでしょう。

今日は、そんな「作業効率向上」に視野を当てた、小生のブックマークをご紹介いたします。

小生のTwitterアカウントでは、毎日小生のブックマークが自動投稿されるようになっているので、こちらもフォローしておいてくれると嬉しいです。

モックアップ／ワイヤーフレーム／構成書作成編

世界中のクリエイターがどういうワイヤーフレームを描いているか参考にしよう！

ワイヤーフレームのテンプレートはここからダウンロード！

ワイヤーフレームの共有と作成はここで！

ワイヤーフレームのリソースはここで確保

その他、ワイヤーフレーム作りの参考になる記事達

デザイン編

デザインに入る前に、気をつけておいたいポイント

サイトのカラーを決めるのに役立つサイト

配色毎に気をつけておきたいポイントを抑える

写真素材を集めるためのサイトをまとめているサイトまとめ

デザインのリソースを確保するサイトまとめ

デザインの効率を助けるサイトまとめのまとめ（のまとめ？）

デザインの質を上げるちょっとしたTips色々

コーディング編

コーディングに入る前に知っておくべきこと

コーダーには是非知っていて欲しい便利君達

企画／提案／ヒアリング編

小生は、英語記事を見る方が機会としては多いですが、やはり日本人はすごいですね、大体日本語翻訳あります。というか、小生がどれだけコリスさんのサイトにお世話になっていたか、再認識しました。やはり、日本人なので、日本語で読みたいですし、アップが早い早い。

また半年ほど立ったらブックマークのまとめを行ないますので、その時はもっと有意義で効率的なブックマークが増えていることでしょう。

Zen-codingをインストールしようとしたら、「メニューを更新できません。拡張機能はインストールされません。」と出る問題の解決

June 10, 2010

いまさらながらですが、Zen-codingをはじめました。

使ってびっくり、これほどまでに作業効率が上がる物だとは思っておらず、なぜ今まで使わなかったのかと後悔しています。

実は、数ヶ月前にも一度インストールを試したのですが、Extension ManagerにZen-Codingをインストールしようとすると、どうしても「メニューを更新できません。拡張機能はインストールされません。」という表示が出てきて、インストールすることができず挫折してしまいました。

今回、この問題でZen-codingの威力を実感できていない人たちのために、この問題の解決方法を記載しておこうと思います。

この警告、実はDreamweaverのショートカットメニューのカスタマイズを行っているために生じる問題だったのですね。

そこで、

C:\Documents and Settings\[ユーザー名]\Application Data\Adobe\Dreamweaver CS4\ja_JP\Configuration\Menus

フォルダ内にあるmenus.xmlを削除するだけで、実は問題は解決されます。（Windows XPの場合）

小生の場合は、スニペットを使ってショートカットの設定を行っていたので、ショートカットキーなんかカスタマイズしまくりでしたが、Zen-codingを入れてしまえば、これまで使いなれたショートカットはもう使わないので、削除しても問題ないでしょう。

ただ、Zen-codingではシンプルなコメント等の挿入はできないっぽいので、小生は、Zen-codingをインストールした後で、スニペットとショートカットの設定で、コメントアウトのみ設定しました。

一応記載しておくと、Zen-codingの実行設定である、Ctrl + ,という設定も、ショートカットメニューのコマンド内にあるZen-codingの設定から設定し直すことが可能なので、もっと使いやすいショートカットに直すこともできます。

Zen-codingがどれだけ素晴らしいものなのかは、EC-Studioさんの知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみたを見てもらった方が理解が早いと思います。

では、よきコーディング生活を。

@font-faceの使い方

January 20, 2010

Delicious font sample

さぁ、どうだ。どう見えますかね？なんか不安。めっちゃ不安。だって、初めてだモン♪
先日、twitter上でご紹介した、@font-faceの記事を読んで、ちょっと面白そうだったので、使ってみました。
記載方法はいたって簡単。
@font-face {
font-family: GraublauWeb;
src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype");
}
こんな感じで、@font-faceを設定して、

h4.test-font-face {
font-family: Delicious, Helvetica, Verdana, Sans-Serif;
font-size:xx-large;
}
​
こんな感じで指定してあげるだけ。
注意点としては、わかっちゃいたけど、IEじゃ動かない。IEで@font-faceを使うためにはeotファイルと言うものが必要。
IE向けの実験はまた今度にするとして、取り急ぎ、eotファイルの作り方をまとめた良記事を発見したので、ご紹介に預かります。
IE で Web Fonts を使う方法 (eot ファイルの作り方) | ヨモツネット

では、よい@font-faceライフを。

完成度の高いフッターのための10のテクニック

January 6, 2010
元ネタ。10 Techniques for a Fantastic Footer by Design Shackよりいくつか抜粋してご紹介。

１．主要ナビゲーションを取り入れる

２．トップに戻るボタンを付ける

３．コントラストを付ける

５．コンタクトを含める

１０．意味を持たせる


とりあえず、見れば分かりそうな物を先にご紹介。以前にも同じようなエントリーをどこかで見たけれど、忘れてしまいました。 フッターって、意外と頭悩ませる部分なんですよね、ユーザーがページの最後に何を求めるか、サイトによっても様々だとは思われますが、用途用途に合わせて、フッターのパターンを頭に入れておくと便利かもしれません。

知る限りのCSSギャラリーサイトを羅列してみる。

October 1, 2009
ブックマークの中整理してたら、これだけの数のCSSギャラリーサイトが出てきた。はじめはキャプチャつけようと思っていたのですが、数に唖然としたので、リンク先だけ記載します。サイトデザインのアイデアに詰まった時便利です。

http://www.cssmania.com
http://www.cssimport.com
http://www.cssremix.com
http://www.cssbeauty.com
http://www.csszengarden.com
http://www.cssvault.com
http://www.cssdrive.com
http://www.csselite.com
http://www.cssreboot.com
http://www.cssempire.com
http://www.csssmoothoperator.com/
http://www.csslab.cl/
http://www.csslove.net/
http://www.cssvault.com/
http://www.csshazard.com/
http://www.csssmoothoperator.com/
http://www.cssbloom.com/
http://www.cssprincess.com/
http://www.css-galleries.com/
http://www.css11.com/
http://www.stylegala.com
http://thesis.veracon.net/
http://www.unmatchedstyle.com/
http://tom.ma/screenblog
http://www.webcreme.com/
http://www.designmeltdown.com/
http://www.dark-i.com/
http://www.designsnack.com/
http://www.w3csites.com/
http://meryl.net/css/index.php
http://www.designshack.co.uk
http://www.artnetz.de/visuell-artcase.php
http://www.piepmatzel.de/
http://screenspire.com/
http://gallery.wordstudio.cz/
http://pajatti.net/
http://designshack.co.uk/
http://www.lightondark.com/
http://www.webstandardsawards.com/
http://bestwebgallery.com/
http://www.unmatchedstyle.com/gallery/
http://www.mosaic-service.com/
http://www.smallblogsnetwork.com
http://portfoliobase.com
http://inspirationking.com
http://www.alabrasil.com/
http://cssremix.com/
http://www.csselite.com/

search


About ci

カナダのバンクーバーに渡り、早３年目に突入。移民申請を行いながら、制作現場から悶々と広告についての考えを巡らせる日々。この多人種国家で、様々な人と出会い、色々なことを学ぶ小生の気ままなメモ的なブログです。
info@ci-xx.org

Networks

Latest Articles

Categories