そのような日々が続くと、他のメンバーに迷惑をかけてしまったり、落ち込んで１日が終わったりと、楽しいはずの日々が憂鬱になってしまいます。
そんな私も日々のスケジュール管理にはとても悩まされていました。

今回ご紹介する「あなたの常識がスケジュールを遅らせる 仕事は半分の時間で終わる！」（著：津曲公二、清水茂）では、そんな仕事のスピードやスケジュール管理に悩める人が、具体的にどのように仕事を進めてれば自分も周りも幸せになれるのかを、具体的な例や理論・法則と共に大変分かりやすく解説しています。

がんばるだけでは仕事は終わらない

「がんばるだけでは仕事は終わらない」
ドキっとする見出しから始まる第１部。良い意味でも悪い意味でも、がむしゃらに仕事に取り組んでしまっている方は、新人社会人の中には多いのではないのでしょうか。

本書の第１部は「こんなことあるある」と思ってしまう仕事の失敗例が紹介されています。
まだまだ仕事の進め方が上手くない私も思い当たることが多く、「あの時のあの失敗はこれが原因だったのかもしれない」「あの時こんな風に考える事ができていたら結果が変わっていたかもしれない」というように、今まで携わってきた仕事を思い返しました。

中でも「パーキンソンの法則」「学生症候群」「凡俗の法則」の話は、何となく日々の生活で感じていたことを、「現象」として理解することができ、今後の生活を変え得るほどの大きな衝撃を受けました。

誰も教えてくれなかった 仕事の正しい進め方

第２部では、第１部で「こんなことあるある」と思った事柄について、根性論・精神論の話では全くない具体的な解決方法が紹介されています。

例えば、スケジュールの立て方。まず、バッファーを全く含まない「最短のスケジュール」と、確実に終わらせることのできる「余裕のスケジュール」を立てます。そして、「最短のスケジュール」と「余裕のスケジュール」の差の半分をバッファーとし、「最短のスケジュール」に足す方法です。この方法を行うことで「余裕のスケジュール」よりはスリムで、「最短のスケジュール」に対して程よいバッファーを持たせられるので、計画したスケジュールを守ることができます。

わかっているようで全くわかっていなかった仕事の進め方。実際に第2部で紹介されている解決方法を実践してみると、仕事で抱えていた不安や迷いがスッキリし、仕事も早く終えられる事が多くなりました。
正直、本当に？と、少し疑っていた「仕事は半分の時間で終わる！」のタイトルに偽りはありません。

おわりに

本書は読んでいるうちに、自然と自分の仕事に置き換えて考えていて、「明日からこう進めてみようかな」と、これから仕事を上手く進めていくための方法が具体的に思い浮かんできました。

まだ仕事の進め方に悩んでいる新人が手にすることができれば、それは今後の仕事人生すべてに関わる大きな財産を得られると思います。悩んでいる分だけ本書にのめり込み、あっという間に読み終えてしまいますよ。

津曲公二、清水茂 著 ダイヤモンド社

本記事では、そんな注目を集めている新しい働き方の強い味方、「コワーキングスペース」について、詳しくご紹介いたします。

コワーキングスペースを利用するメリットとは

コワーキングスペースを利用する利点は以下のようなものが考えられます。

仕事に集中できる環境がある

コワーキングスペースはカフェや自宅とは違い、仕事をしている人が多く集まっているスペースです。学生時代、受験勉強を図書館や学校の自習室でした際、周りが頑張って勉強しているから自分ももっと頑張らなくては、そう思ってもうひと踏ん張り、ふた踏ん張りした経験はないでしょうか。それと同じことがコワーキングスペースでも起こります。他の場所で仕事をするより自然と集中できるのです。（心理学の言葉で「同調行動」と言うそうです。）

新たな出会い、コミュニティーを作ることができる

コワーキングスペースの多くは仕切りがなく、開かれているスペースです。「仕事をする」という同じ目的で利用していますし、利用者同士の距離も近いので意見交換、情報交換も行いやすいです。もっと上手くいけばビジネス上のコラボレーションに発展する可能性も。また多くのコワーキングスペースでは、イベントやセミナーも頻繁に行われています。そこに参加することで新たな出会いも生まれるかもしれません。クリエイター、特にフリーランスで働かれている方にはこういった出会いはとても重要ですよね。

打ち合わせ場所としての利用もできる

特にフリーランスの方は先方と打ち合わせをしたいけど自宅は招きづらく、カフェなどでは雑音が邪魔だし資料を広げるスペースもあまりない、なんてこともあると思います。コワーキングスペースの中には、資料を広げても余りある大きいテーブルを所有していたり、ホワイトボードを貸し出していたり、小さな会議室を借りられたりするるところもあります。自分１人で集中して仕事をするだけではなく、打ち合わせの場として活用する手もありそうです。

職業に特化した特徴的なコワーキングスペースで、専門的な作業ができる

数あるコワーキンングスペースの中でも、特定の職業や作業に特化した特徴的なコワーキングスペースもあります。レーザーカッターや3Dプリンターが使用できたり、製本作業ができたり、ミシン貸し出しや巨大プリンター、スマホ・PCの検証機の貸出などなど、探せば特徴的なコワーキングスペースがみつかります。自分の職業や、やりたいことにマッチしたコワーキングスペースが見つかれば、そこに行かない理由はないですよね。

まとめ

2015年より11月を象徴月間とし、総務省、厚生労働省、経済産業省及び国土交通省が中心となって呼びかけをしている「テレワーク月間」。多くの企業や団体がテレワーク運動に賛同し、その取り組みを発信しています。

テレワーク月間に参加している企業・団体紹介ページ

テレワーク月間ではキャンペーンや、特典を配布しているコワーキングスペースもありますので、この機会にいろいろなところに行って、自分の働き方にぴったりの場所を見つけるのはいかがでしょうか。

今回はeラーニングサービスの中でも、特に使いやすかったサービスをご紹介します。どのサービスも無料で使えるコンテンツが充実しているので、まずは使ってみて自分にフィットするeラーニングを見つけてみてくださいね。

わかりやすいスライドと演習で学習「Progate」

Progateは問題を解けば解くほど経験値が貯まり、レベルが上がっていく面白さがあり、ゲームのような感覚で楽しみながら学習できるeラーニングです。

学習の流れは、①スライドのテキストやイラストで学習、②実際にコードを書いて学習の①と②を繰り返すという大変シンプルな流れ。スライドで学習したことをその後すぐに自分の手を動かして実践することができます。

Progateはとにかくスライドが分かりやすく、説明も細かいので、初めてプログラミングを学習する方にはオススメのサービスです。

• Progate

穴埋め形式でサクサク学習「CODEPREP」

CODEPREPは「ブック」と呼ばれる教材を、テキストを読みながらコードを記述して学習を進めるスタイル。解説がとてもシンプルで、初めて触れる言語を学習するには少しとっつきにくいかもしれませんが、学習する言語の基本的な知識さえあればサクサクとスピード感を持って学習を進めることができます。

また、このサービスで特徴的なのが「ディスカッション」という機能。ユーザー同士が意見を交わしたり、わからない箇所について気軽に質問をすることができます。一緒に学習している“仲間”を感じられる点、すぐに質問ができる環境が整っている点も、学習の意欲を継続させてくれます。

毎週最新のブックが追加されるので、技術の変化やトレンドのキャッチアップにも期待できそうです。

• CODEPREP

英語が苦でなければ基本から応用まで幅広く学習「Codecademy」

Codecademyは基本的に英語での学習ですが（導入編のみ日本語での学習も可能）、コンテンツが充実しています。HTMLとは何か、といった基礎的な部分から、実際にWebページを制作し公開するまでの全行程を、幅広いコンテンツで身につけることができます。

プログラミング言語・マークアップ言語を１から丁寧に学びたい方は、Codecademyに登録して損はありません。

また、英語で学ぶスタイルなので、裏を返せばプログラミング言語と同時に英語も学習できるということ。貪欲な方にオススメです。

• Codecademy

生放送で、わからないことは即質問「Schoo」

Schooは生放送で視聴者参加型の授業を受けることができるのが特徴です。放送時間は基本的に19:00から22:00の間なので帰宅時間のお供としていかがでしょうか。

Web業界で働く人をターゲットにしていますが、内容も多岐に渡り、アプリ開発から、コピーライティング、外国語、栄養管理まで。毎日豊富なコンテンツが放送されています。生放送を視聴するだけなら完全に無料で学習できます。

• Schoo

439もの豊富なコースで幅広く学習「lynda.com」

lynda.comは豊富なコンテンツで私たちの学習を強力にサポートしてくれます。とにかく動画数が多く、またひとつひとつ動画のボリュームも大きいので、専門的な知識を得ることができます。スキマ時間に少しずつ見るのもよし。休日にまとめて一気に見るのもよし。完結するコースのみならず、毎週更新の動画もあるので、新しい技術もカバーすることができます。

• lynda.com

今回ご紹介したサービスはどれも無料で始められます。（有料コンテンツ有り）

まずは一度無料で体験して、自分の性格やライフスタイルに合う学習サービスを見つけましょう。

今回は私がいつも使用しているBracketsのプラグインで特に使い勝手が良かったもの、コーディング初心者でも使いやすいものなど、Brackets初心者がインストールするべき機能を紹介します。

Bracketsとは

BracketsとはAdobeが提供しているオープンソースコードエディターです。無料で使用でき、コードヒント、ホバークイックビュー、ライブプレビュー機能など、数々の便利な機能がデフォルトで付いています。起動もとても早いです。そして、特徴的なのがプラグイン（拡張機能）の豊富さです。600種類以上もあるプラグインから、自分好みのものをインストールし、カスタマイズしていくのは我が子を育てるかのよう。

プラグインのインストール方法

プラグインのインストール方法は驚くほど簡単です。画面右端にある、ブロックのアイコンをクリックすると「拡張機能マネージャー」が立ち上がります。あとは希望の拡張機能のインストールボタンを押すのみ。

それでは早速、初心者がまずインストールするべきプラグインを紹介します。

Bracketsの基本拡張機能

Emmet

なくてはならない相棒。使い方を少し覚えるだけでコーディングの速度が爆発的に上昇します。 もっと詳しくEmmetについて知りたい方は、ぜひこちらの記事も。

Beautify

コードを綺麗にしてくれるプラグインです。コードがきたなくなりがちな方は、このプラグインを入れることでコードを整理する作業から解放されます。保存する度に自動でコードを整理するように設定もできますが、人や環境によってインデントの数など細かい違いがあるかと思いますので、まずはBeautify自体の設定を行うことをおすすめいたします。また、Beautifyはminファイルなどを復元する時にも役立ちます。

Brackets CSS Class Code hint

一度使ったことのあるクラス名、ID名をコードヒントとして表示します。各プロジェクト内のクラス、ID名のみ表示するので、今まで使用したクラス名がずらーっと表示されてしまうこともありません。また、このプラグインを使用することによってクラス名、ID名のタイプミスを減らすことができます。

Brackets Icons

HTML、CSS、javascript、PHPなど、ファイルの種類ごとにわかりやすいアイコンを表示します。視覚的にとてもわかりやすくなるので、インストールすることをおすすめします。もうこのアイコンが表示されていなかった時のことを忘れてしまったぐらい目に馴染んでしまいました。

Color Hint

同じCSSファイル内で、一度使用したことのある色をコードヒントとして表示します。同じ色は何度も使うことが多い訳で、とても多用します。微妙に違う色を何種類か使用していた、というミスもこの拡張機能で発見することができます。

Documents Toolbar

DreamweaverからBracketsに移行してまず思ったことは、「ファイル間を移動するタブが無いんだ…」ということでした。Bracketsはファイル間の移動をサイドバーで行うので、始めのうちは手癖でカーソルを上の方に移動させてしまうことも少なくありませんでした。そこでこの拡張機能が役に立ちます。Documents ToolbarはBracketsにタブを表示させる拡張機能です。今でこそ、サイドバーの扱いにも慣れておりますが、上でも左でもどちらか近い方でファイル間の移動を行うことができる環境はストレスフリーです。

HTML Block Selector

開始タグでも、終了タグでも、どちらかをフォーカスさせた状態で「command + shift + T」を押すとタグ全体を選択します。入れ子も含めて全て選択してくれるので、タグ全体を削除やコピーするためにドラッグする必要がなくなります。

Paste and Indent

インデントが入っていないコードをコピーしてペーストした時に、自動的にインデントしてくれます。例えば、参考にしたいコードを見つけた際、自分が書いているコードのインデントと異なっていても、ペーストした瞬間に自分が設定しているインデント数と揃います。また、書いているコードのインデントが少し乱れてしまった際にも、前述の「HTML Block Selector」でタグ全体を選択し、カット&ペーストで綺麗なインデントにしてあげる、といった使い方もできます。

Select Lines

DreamweaverにあってBracketsにない機能。それは行の選択です。行番号をクリックして、一行まるまる選択できないBracketsをできるBracketsに。今までできていたことができなくなることは、とても不自由ですので真っ先にインストールしておくことをおすすめします。

CSSFier

HTMLをコピーしてCSSファイルに貼り付けると、ID名、class名を含めてCSSのソースコードに変換します。初めて使った時は驚きました。

以上がBracketsで実際に使って役に立っているプラグインです。
DreamweaverにあってBracketsにない機能を補完するプラグインもありますので、今までDreamweaverを使用していた方には特におすすめのプラグイン選です。

このようにBracketsはさまざまなプラグインでコーディングを後押ししてくれます。またBracketsの背景色やタグの色も数多くのテーマから選択し、ダウンロードすることができます。見た目も自分好みにすることで、コーディングすることがもっと楽しくなりますよね。

Bracketsをカスタマイズして、より楽しいコーディングライフを送りましょう！

みなさま、GWはいかがお過ごしでしたか。私はとある写真展を見に京都に行ってまいりました。楽しかったです。

前回の記事で、私は「Emmet」を使用するといかにHTMLを記述するのが楽になるのかということを書きましたが、「Emmet」はHTMLだけでなくCSSにも使用できます。

それでは、早速CSSの例を見ていきましょう！

width

border

複雑な記述

このように、CSSもHTML同様圧倒的にコーディングの工程を減らすことができるのです。

それでは次に、「Emmet」を使用したCSSコーディングの基本的なルールをご紹介します。

「Emmet」の入力規則（CSS編）

「Emmet」の使い方は、ご使用のコーディング環境(DreamweaverやBrackets、sublime等のtextエディター)に「Emmet」を導入後、ルールに基づいた記号を打ち、「tabキー」や「command + E」を押すだけです。（コーディング環境により異なります。）

１.プロパティを入力する

プロパティ名を頭文字の入力だけで記述することができます。
よく使用する代表的なプロパティの記述方法をご紹介します。

w
/*展開 tabキー or command+E*/
width

h
/*展開*/
height

d
/*展開*/
display

c
/*展開*/
color

t
/*展開*/
top

「top」と「text-align」など、同じ頭文字のプロパティの場合は、また別にショートカットが与えられております。

例えば「text-align」でしたら「ta」、「text-decoration」は「td」など。こういった場合も各単語の頭文字がショートカットになる場合が多いです。

２.値を入力する

プロパティ名のみでなく、値もまとめて省略形で記述することができます。
それでは、「１.　プロパティを入力する」で記述したプロパティに値もまとめて入力してみましょう。

w230
/*展開 tabキー or command+E*/
width: 230px;

h20p
/*展開*/
height: 20%;

d:b
/*展開*/
display: block;

c#c
/*展開*/
color: #ccc;

t5
/*展開*/
top: 5px;

数値や色の場合は「:」を付ける必要もありません。

また、marginやborderなど複数の値を入力する必要のあるプロパティは「-」で数値と数値の間を区切ると、複数の数値が入力できます。

m0-a
/*展開 tabキー or command+E*/
margin: 0 auto;

m20-30-40-50
/*展開*/
margin: 20px 30px 40px 50px;

bd1-s-#c
/*展開*/
border: 1px solid #ccc;

そして、単位の指定も簡単で、数値のすぐ後に単位を表す文字を記述すれば、その単位がつきます。何も指定しなければ「px」がつきます。

w100
/*展開 tabキー or command+E*/
width: 100px;

w100p
/*展開*/
width: 100%;

w100e
/*展開*/
width:100em;

w100r
/*展開*/
width:100rem;

w100vw
/*展開*/
width:100vw;

「!important」の記述も「!」ひとつで指定できます。

h300!
/*展開 tabキー or command+E*/
height: 300px !important;

３.複数のプロパティを一度に記述する

以下のようにプロパティを「+」でつなげることで、複数のプロパティを記述できます。

fz26+bdb3-s-#0+d:ib+lh1.7
/*展開 tabキー or command+E*/
font-size: 26px;
border-bottom: 3px solid #000;
display: inline-block;
line-height: 1.7;

４.ベンダープレフィックスをつける

「Emmet」はベンダープレフィックスも自動でつけてくれます。もちろん全てのプロパティについてしまうわけではなく、必要に応じてベンダープレフィックスがつきます。

df
/*展開 tabキー or command+E*/
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;

また「-」を先頭に付けることで、明示的にベンダープレフィックスをつけることも可能です。

-fxw:w
/*展開 tabキー or command+E*/
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;

「Emmet」CSSコーディングの真髄「Fuzzy Search」

さて、これまでさまざまな省略方法が登場してきましたが、その省略形を覚えるのが大変…と思った方も多いのではないのでしょうか。 しかしこの「Emmet」、そんな心配をする必要はありません。
「Emmet」には「Fuzzy Search（あいまい検索）」という機能があります。その名の通り、なんとなく記述できていれば、「Emmet」が「こういうことでしょ？」と判断し、展開してくれるのです。

例えば、「float: left」と記述したい場合

正しい記述

fl:l

なんとなくの記述

fl
fll
flol

float: left;

として展開されます。
つまり、まずは記法を覚えてから、なんて前準備をすることもなく、素早くコーディングができてしまうのです。 もちろん、自分が思った通りに展開されないこともありますが、上手く展開されなかった場合は「Emmet」のチートシートで記述方法を確認してみましょう！

いかがでしたか。
HTMLだけでなくCSSも素早くコーディングできます。私自身、最後にご紹介した「Fuzzy Search」という機能には大変助けられています。この機能があることで、「Emmet」の導入の敷居が下がったのではないでしょうか。皆さんも是非使ってみてください！コーディングが今よりも、もっと楽しくなりますよ！

「Emmet」の入力規則（HTML編）

１.タグの展開

p
/*展開 tabキー or command+E*/


img
/*展開*/


sect
/*展開*/

２.IDとclassを付ける

p.
/*展開 tabキー or command+E*/


span.test
/*展開*/

#wrapper
/*展開 tabキー or command+E*/

３.入れ子の構造を作る

p>span
/*展開 tabキー or command+E*/


.test>p>span
/*展開*/

    

４.兄弟の要素を作る

.test+.test2
/*展開 tabキー or command+E*/



.box>p+ul
/*展開*/

    

    

５.一階層上に要素を作る

p.hoge>span^footer
/*展開 tabキー or command+E*/



.box>p>.txt^^figure
/*展開*/

    

６.同じ要素を複数作る

ul>li.item*5
/*展開 tabキー or command+E*/

    

    

    

    

    

７.テキストを入れる

.txt>p{こんにちは}
/*展開 tabキー or command+E*/

    
こんにちは

８.連続した数字を入れる

.box$*2>figure>img
/*展開 tabキー or command+E*/

    



    

さて、突然ですが新人の私はいつも時間がありません。それはなぜでしょうか…。
答えは簡単。業務スピードが遅いのです。

そんな時間に追われる新人WEB担当者の方々の助けに少しでもなることができればと思い、Photoshopでよく使用するショートカット、WEB制作において使い勝手が良いと感じたショートカットを厳選してご紹介します！,/p>

（※ MacでPhotoshopを使用することを想定しています。Windowsの方はcommandをCtrlに置き換えてください。）

ツールパネル系

移動ツール

『 V 』

移動ツールです。何かを移動させたい、そんなときは迷わず『V』です。

選択ツール

『 M 』

選択ツールです。私は距離を測るときによく使うので、メジャーの『M』と覚えています。

文字ツール

『 T 』

文字ツールです。文字を打つときや、編集したいときに『T』を押すだけで良いので簡単です。覚え方も簡単。お気付きの通り、Textの『T』ですね！

長方形ツール

『 U 』

長方形ツールです。ちなみに「 shift + U 」を押すことで長方形ツール → 角丸長方形ツール → 楕円形ツール → さらに続く…。と次々と図形を切り替えることができます！

ズームツール

『 U 』

ズームツールです。画面上部のスクラブズームにチェックを入れていれば、ドラッグするだけで拡大縮小が可能になります。

手のひらツール

『 スペースキー(押している間) 』

スペースキーを押している間は手のひらツールです。スペースキーを押しながらドラッグすることで画面内を簡単に移動できます。

テキスト編集系

文字サイズ変更

『 command + shift + ,(<) 』
『 command + shift + .(>) 』

文字サイズを変更できます。『<』『>』で覚えると感覚的に操作できます。

トラッキング・カーニング

『 option(alt) + ← 』
『 option(alt) + → 』

文字の間を選択すればトラッキング、複数文字を選択すればカーニングが調節できます。

文字編集から抜ける

『 command + ENTER 』

文字編集を終えたい時は、『command + ENTER』で一発です。

画像編集系

画像解像度変更

『 command + option(alt) + I 』

画像の解像度を変更できます。

カンバスサイズ変更

『 command + option(alt) + C 』

カンバスサイズを変更できます。『C』はcanvasの『C』ですよね！

レイヤー系

グループ化

『 command + G 』

複数のレイヤーを選択して『command + G』でグループ化です。グループの『G』ですね！

『 command + E 』

複数のレイヤーを選択して『command + E』で結合です。

選択レイヤーをロック(ロック解除)

『 command + / 』

レイヤーを選択して、『command + /』でロックです。もう動かさないな、と思ったレイヤーはこのショートカットキーで動かないようにしてしまいましょう。

複数のレイヤーを非表示（表示）

『 レイヤーパネルの『目』の印をドラッグ 』

レイヤーパネル『目』の印の部分を上下にドラッグすると、複数のレイヤーを一気に非表示（表示）にすることができます。

表示系

全ての要素を画面内に

『 手のひらツールをダブルクリック 』

デザインしたページの全体像を確認したいときは『手のひらツール』をダブルクリックです。全てのレイヤーを画面内に収まるように表示してくれます。

100%表示

『 command + １ 』

100%表示にできます。制作物は必ず100%の縮尺で見ましょう！

フルスクリーン表示

『 F 』

デザインした最後に100%表示でフルスクリーンにしてチェックします。

保存系

別名で保存

『 command + option(alt) + S 』

web用に保存

『 command + option(alt) + shift + S 』

以上がWEB制作において使い勝手が良いと感じたショートカットです！
Photoshopに慣れていない人も、ショートカットキーを覚えることでよりPhotoshopが身近になり、仕事がもっと楽しくなると思います！ たかがショートカット、されどショートカット。
塵も積もれば山となりますよ。