私(Webデザイナー)が効率よく仕事するためにしているコーディング術や検索術

Posted under - Misc

31

みなさんも仕事の効率化、時間短縮のためにしていることってありますよね? 私ももちろんいろんな工夫をしているのですが、もっと効率よく仕事がしたいって思っています。 とりあえず、今、時間短縮の為に私がしていることをまとめてみました。

More Efficient At Work

私は毎日 Webサイトを作るために、Photoshop を使ったり、コーディングしたり、調べものをしたり … とにかくいろんな作業をしています。そんな中、もっと時間短縮できないかなー、これって時間の無駄だなーと思うこともたくさんあります。1日は 24時間しかないし、決められた 24時間の中で自分の時間を作るためには、仕事の時間を圧縮するしかありません … X(

できるだけ無駄をなくして、早く仕事が終われるように、時間短縮術をマスターしたいと思ってます。コーディングを早くできるようにしたりするものはもちろん、欲しい情報に素早くアクセスできるような工夫など、今私が時間短縮のためにしていることをまとめてみます。みなさんがやっている時間短縮の工夫なども教えていただけるとうれしいです!

コーディング術、検索術 目次

  1. 基本的にショートカットを使いまくる
  2. その他のよく使うショートカット
  3. Chromeのブックマークメニューバーが便利
  4. Chromeのタブを固定も何気に便利
  1. プロジェクト進行中時の小技
  2. コーディングのスピードアップ
  3. Google検索とEvernote検索(Google Chrome)
  4. リラックスしてストレスなく仕事するために

1. 基本的にショートカットを使いまくる

時間短縮の基本は、まずショートカットですよね。でもアプリケーションごとに、いちいちショートカットを覚えるのは … と思うかもしれませんが、どんなアプリでも大体同じショートカットは、同じ動きをします。Photoshop や Illustrator などのショートカットは、頻繁に使う機能のショートカットを覚える必要もあると思いますが、グローバルな … というか、どのアプリでも使えるショートカットというのもたくさんありますよね!私は mac なので、commandoption と表記してますが、Windows の場合はそれぞれ CtrlAlt キーに対応していると思います。

1.1. コピー

command + C

command + C

テキストエディタ、ブラウザ、Photoshop、Evernote など、どこで使ってもこのショートカットはコピーですよね。

1.2. 切り取り

command + X

command + X

これは使えるところはテキストエディタ、メールなどになりますが、切り取りですね!

1.3. 貼付け

command + V

command + V

コピーしたり切り取ったものをペースト(貼付け)します。

1.4. 取り消し

command + Z

command + Z

直前の作業を取り消して元に戻します。2 回以上押す場合は、アプリによってはどんどんさかのぼって元にもどるか、取り消し、再実行の間をいったりきたりする … といった動作の違いもあります。

1.5. 全部選択

command + A

command + A

コピーや切り取りしたいものがフォーム内とかだとこれも便利です。command + A して全選択、command + C でコピーはセットでよく使ってます。

1.6. 検索フォームを開く

command + F

command + F

Find の F なのかな? 基本的に command + F で、検索フォームを開きます。Chrome や Firefox などでは、サイト内検索窓がひょこっと現れますし、Coda(テキストエディタ)の場合も、同じようにドキュメント内の検索窓が現れます。Evernote の場合も一瞬でカーソルが検索窓へ移動します。

検索フォーム

1.7. 次へ、前へ移動

command + G

command + G

次へ移動、という動作のショートカット。サイト内検索やドキュメント内検索の時に次の出現場所まで押すたびに移動できます。Evernoteではノートを順番に移動できたりします。

command + shift + G

command + shift + G

さっきの逆で、前へという動作をします。

キーワードの出現場所に移動

1.8. 上書き保存する

command + S

command + S

保存です。どんなアプリも大体これで上書き保存ですね。

1.9. ウインドウを閉じる

command + W

command + W

今開いてるウインドウを閉じます。テキストエディタでもブラウザでも Photoshop でも、とにかく開いてるドキュメントを閉じます。保存が必要な場合なら、ダイアログボックスで確認してくれるので問題なしです。ブラウザの閉じるボタンは触らなくなりましたねー。

1.10. アプリケーションを終了する

command + Q

command + Q

アプリケーションを終了します。これのおかげでメニューを開いて~を終了する、なんて面倒なことはしなくなりました。

2. その他のよく使うショートカット

2.1. Google Chrome

最近私は Google Chrome を使っているんですけど、Chrome の便利だなーというショートカットキーをいくつかご紹介します。みんな知ってると思うけど … X(

command + option + I

command + option + I

デベロッパーツール(Firebugみたいなの)を一瞬で開きます。Chrome にも Firebug のエクステンションがありますが、私は最近こっちを使ってます。何でかっていうと、さっきの command + Fcommand + G で検索、移動ができるのがちょっと便利です。

デベロッパーツール

command + option + U

command + option + U

新しいタブでページのソースを表示できます。Firefoxの場合は command + U でページのソースを表示できますが、新しいウインドウが開いてしまいます(設定があるのかしら?)。

ページのソースを表示

command + F、command + G での検索の使い勝手は、Chrome、Firefox も同じなんですが、決定的に違うのは、Chrome の場合はソースを新しいタブで開けるということ。例えばスタイルシートのリンクをクリックした場合でも、CSS ファイルが新しいタブで開きます。Firefox だとページが移動してしう上に、戻るボタンがないという …

CSSのソース

Attention

Firefoxでもソースをタブで開くアドオンをツイッターで教えていただきました!私は試していませんが、やっぱりあったんですね!


こんな風に、とにかくショートカットは色んなところで使いまくってます。早いだけでなくて、マウスを使わない、クリックしない … というところも、右手を酷使しなくて済むし、長い目でみるととっても大事だなーって思ってます。私はマウスを長時間使っていると、右の手首がすぐに痛くなるので … X(

3. Chromeのブックマークメニューバーが便利

いっつもアクセスするサイトを、ブラウザのメニューバーに追加している人も多いと思うんですけど、Chrome の場合はちゃんとファビコンで表示されます。なのでサイトの名前を全部表示しなくても、ファビコンで直感的にクリックできます。私はサイトの名前を表示しないでファビコンだけにしてるので、その分たくさんメニューバーにブックマークを並べることができます。ワンクリックで素早くアクセスできるのって大事ですよね!

ブックマークバー

Firefox だとファビコンが表示されないので、サイト名を表示する必要があるし、直感的な操作がしにくいです … 。たくさんのブックマークを入れるには、ブックマークメニューバーを 2段にしなくちゃなりません(そーいうアドオンがたしかありましたね)。

Attention

Firefoxでもブックマークツールバーにファビコン表示するアドオンがありました!

Attention

Firefoxも 4.0 になって、ブックマークツールバーにファビコンが表示されるようになりました!

  • 次世代ブラウザ Firefox

    Download

4. Chrome の「タブを固定」も何気に便利

クロームの「タブを固定」っていう機能がお気に入りです。頻繁に使うサイトは、常に表示させておきたいですよね。例えば WordPress でテーマを作ってるときなど、WordPress Codex をちょくちょく参照します。通常のタブだと誤って閉じてしまうこともありますが、タブを固定しておくとそれもなくなるし、タブがコンパクトになって邪魔にもなりません。なのでいつもタスク管理の Remenber the Milk や、WordPress Codex、Twitter など表示させています。

Google Chrome の「タブを固定」機能

間違って閉じる → 履歴やブックマークから再表示する … という無駄な動作はなくなりました。

5. プロジェクト進行中時の小技

これは Mac だけになっちゃう小技なんですけど、プロジェクト進行中は、その時だけ頻繁に使うフォルダってありますよね。もちろんエイリアス(ショートカット)を作って、デスクトップに置いて素早くアクセス!っていうのもありだと思うんですけど、私はディスプレイ 1個だし、Macbook だし、決して大きくないディスプレイで仕事してるので、いちいちデスクトップを表示するのも面倒で … X()

プロジェクト進行中は、よく使うフォルダをドックに置いておきます。たったこれだけ。

Mac の Doc に置いておく

いろんなドキュメントを開いた散らかったウインドウでも、ドックならいつでもワンクリックでアクセスできます!… っていうか、mac ユーザーなら普通にやってるのかな?

5.1. ユーザー辞書に単語登録を迷わずする

Webサイトを作成するってことは、文章をたくさん書きますよね。固有名詞はもちろん、クライアントさんによっては、コンテンツに専門用語も多くなったり、とにかく一回で変換できないっていうことありますよね。

そんな単語は、とにかくユーザー辞書にどんどん登録してしまいます。次からは一回で変換できるようになるので、無駄なストレスを感じなくて済みます。二度と使わないであろう変な単語でも、迷わず登録しちゃいましょう。

美微暗(びびあん)、美苦取案(びくとりあん)、目偉伝(めいでん)、夜露死苦(よろしく)など … 二度と使わない …。また、記号などのエスケープ文字も登録しておくと便利です。

“<":&gt;、”>”:&lt;、”©”:&copy、”»”:&raquo; など …

6. コーディングのスピードアップ

コーディングを早くするコツとして、最近は Zen Coding が人気ですよね。

Zen Coding についてはいろんなサイトで紹介されているので、ここでは省略しますね。コーディングの時間短縮の第一歩は、よく使うコードはどこかに登録しておくこと。私は Evernote に WordPress や CSS などのよく使うコードや、見ながらじゃないと書けないコードなどを書きためてると同時に、テキストエディタに登録しています。

テキストエディタへのよく使うコードの登録の仕方はそれぞれだと思いますが、私は Coda(Mac専用なんですよね … 残念ながら …)を使っているので、Coda のクリップ機能をご紹介します(あんまり Coda のクリップの使い方についてかいてあるブログがなかったので)。

6.1. Codaのクリップによく使うコードを登録しておく

XHTMLや CSS、WordPress やの構文など、とにかく日頃繰り返し使うことの多いコードや、何かを見ながらじゃないと書けない、覚えきれてないコードなどは、クリップに登録しておけばいつでも簡単に呼び出すことができます。また呼び出すときも簡単で、TABトリガという機能を使えば、ショートカットのように簡単に登録したコードを呼び出すことができます。

まずは Coda のクリップを呼び出してみましょう。ショートカット command + control + C で開くこともできますが、Evernote を入れている場合は Evernote のクリップのショートカットと競合しているので、変更するなどしてください。または、メニュー → ウインドウ → クリップ で開きます。

クリップを開いたら、いちばん下にある “+” ボタンで、新しいグループやコードを追加できるので、CSS、JavaScript、PHP など、お好みでグループを作って整理しやすいようにしておきます。


コードを追加する時には、一緒に TABトリガを登録しておくとちょー便利です。TABトリガというのは、例えば “navi” と入力したあとに tab キーを押せば、ナビゲーション用に登録してあるコードが呼び出されるという感じで、ショートカットのように使うことができる機能です。

例では CSS の clearfix のコードを、clearfix + Tab キー でコードが一発で呼び出されるように登録しています。ブレースホルダーというのは、コードを呼び出したあとのカーソルの位置です。私は reset.css や font ファミリー、コメントで使う /*******/ から、WordPress の構文など、ありとあらゆるコードを登録しまくっています。

また、Coda には、WordPress モードや Zen Coding を使えるようにするプラグインも配布されていますので、さらに便利に使えますね!

6.2. WordPress で記事を書くとき

私は WordPress を使って Webサイトを作ることが多いです。でも実は、WordPress の投稿画面に記事を直接書くってことは、あんまりしてません。大体 Evernote で下書きしてから、投稿画面でタグを整形するか、時には Coda を使ってタグを入れたりしてます。

下書きを投稿画面で HTML に整形する時に書かせないのが、Add Quicktag というプラグイン。タグに限らず、好きな定形文を登録しておいて、ボタンを押すだけで投稿画面に書き込んでくれるので、スピードアップには欠かせないプラグインですね!

例えばリストは最初から ulタグボタンや、olタグ、liタグボタンがありますが、ul の後には必ずli タグがくる訳だし、一個のボタンで済むようにしちゃったり、定形の table をよく使うサイトなら、ボタンひとつで table 全体を書けちゃうように登録しておくとか。

AddQuickTag

とにかく別のところからコピーしてペーストする … なんていう手間をかけないように、よく使うものはどんどん登録してしまいます。クライアントさんに渡す時にはボタン消しちゃえばいいんですから。

7. Google 検索と Evernote 検索(Google Chrome)

コーディングをしていると、いろいろ検索して調べる必要があることも多いです。そんな時には当然 Google を利用するんですけど、Evernote と Google 検索を同期させておくと便利です。

というのは、調べものをするとき、実は過去に同じような検索をしていて、それを Evernote にクリップしてあって、自分では忘れている … っていうことが時々あります。

Google 検索と Evernote 検索をリンクさせておくと、Google で検索したときに、Evernote 内も検索してくれます。Google Chrome で使っているので、その他のブラウザでは確認していませんが、興味のある人は調べてみてくださいね!

Google 検索と Evernote を同期

Google検索と Evernote検索を同期させるには Chrome のエクステンション、Evernote の Webクリッパーを入れる必要があります。

Evernote の Webクリッパー拡張機能をを入れたら、拡張機能のオプション設定で、同時検索機能を利用するにチェックを入れます。

Webクリッパーのオプション

たったこれだけで Google 検索した時に、Evernote 内のヒットも知らせてくれます。

同じような検索を何度もしているっていうのも無駄なことですよね。クリップしてある Evernote のノートを、もっと読み込んで理解しようっていう気にもなるし、過去のクリップも無駄にしないですみますね。

7.1. Evernote 内の検索結果精度をあげるために

私は Evernote を使い始めてから、ソーシャルブックマークを使わなくなりました。delicious を使っていたんですけど、Yahoo が delicious を売却という噂が流れたころにやめちゃいました。

で、Webクリッパーを使って、ブックマーク感覚でどんどん Evernote にクリップしていたんですけど、これが失敗。Evernote で Web上のコンテンツをクリップする時には、気をつけたいことがあります。

それは、Webサイトのヘッダーやサイドバーやナビなどを除いた、コンテンツのみをクリップするということ。Evernote のノート内の検索は強力で、そのキーワードを含むノートを全部検索結果に返してくれます。

例えば “WordPress” と Evernote で検索したときに、コンテンツには WordPress というキーワードがなくても、クリップした Webサイトのサイドバーに WordPress というキーワードがあるとヒットしてしまうんですよね。

むやみやたらと Webサイトを丸ごとクリップするのも、ちょっと問題ありそうです。もちろん適切なタグ付けをしてれば tag : iPhone + App などでピンポイントに検索できますけど …

なので、Evernote をブックマーク的に使うなら、必要な部分だけクリップする工夫が必要かもしれませんね。

Attention

Chrome の エクステンション、Clip to Evernote が新しくなって、記事の部分だけを簡単にクリップできるようになりました!

また、クリップするときには、本当にクリップするべきかどうか考えるようになりました。ソーシャルブックマークを使ってた時によくやっていた、後で読むっていう風にして、結局読まないで放置っていうのがなくなりました!

クリップしたブックマークはそのままにしないで、どういう時に検索したのか、どんな時に使いたいのかなど、自分で加筆しておくととても使いやすくなります。あくまでも Evernote は自分のノート。書いた本人が、なにが書いてあるのか分からない … っていう風にならないように、どこに何が書いてあるかを、自分で把握できるようにしたいですね!

そんな風にしていると、自然と本当に必要で、質の高い情報だけをクリップするようになるので、Evernote の中身が本当に貴重なソース元になってきました。もちろんそのことは仕事の生産性をあげるのに役立っています!

8. リラックスしてストレスなく仕事するために

8.1. 働く時間を決めてちゃんと休憩する

ここからはちょっと個人的な仕事スタイルです。私はフリーランスなので、朝 9:00から夕方 5:00まで … というように、働く時間に決まりがあるわけではありません。なので自分で一番仕事に向いてる時間というか、集中できる時間に仕事をするようにしています。けっこうそういう風にしている人は多いみたいですよね。ツイッターとか見てると。

でも集中しちゃうと、ついつい時間を忘れて没頭しちゃいます。これって実は、効率的なようで、そうでもないかも …。やっぱり適度な休憩をとって、リラックスしながら仕事をした方がストレスも減ります。

なので私はタイマーを使って、ちゃんと休憩を取るようにしています。最近は 60分仕事するごとに、20分休憩をとってます。この時間は、ときと場合によって変えてます。

えー、もう一時間たっちゃったー!みたいな方が、いい意味で気持ちもあせってやる気が持続できたり …。タイマーを使って仕事をして、アラームが鳴ったときの気持ちというか、感想みたいなのを元に設定する時間をいろいろ変えてます。

ちょっと便利なWebタイマー

8.2. 音楽の力を借りる … YouTube のヘビーユーザーです

リラックスして仕事をするのに、私は音楽が欠かせません。会社で音楽を聴きながら仕事ができるかどうか … といえば微妙な感じですけど、私はフリーランスなので、耳にいつでもイヤホンを突っ込んでます!

音楽を聴く時に利用しているのが Youtube。気に入った動画をどんどん再生リストに追加して、お気に入りの曲ばっかりエンドレスリピートです ;D iPhone でも見れるしねー!

YouTube の再生リスト


こんな風にしてフリーランスライフを楽しんでいます!仕事の効率化をして、もっともっと時間を有効活用したいです … 。みなさんの時短術、こんなの便利だよーっていうのがあったらぜひ教えていただけるとうれしいです!

Comments

Thank you for the comment.