Collegeとはオーストラリア、シドニーに拠点を置くグラフィック、ウェブデザインスクール。現役で活躍するデザイナーから最先端のデザインレクチャーを受けることが出来る実践的デザインスクールです。2015年4月10日こんにちは!StudioSPECのakiraです。時代の流れは早いものでWeb制作を取り巻く環境も随分と便利になりました。同時にDreamweaverとPhotoshopが使えればOKな時代ではなくなっています。僕はこのブログを通じて、SpecDesignCollegeの授業ではお伝えしきれない便利な情報等をお伝え出来ればと思って書いています。そんなお伝えしたい技術やツール。そのほとんどが通称黒い画面といわれる「コマンドライン」を利用してインストール、操作を行います。これからWeb制作を学ぼうと考えている方は、ぜひ最初の段階から黒い画面を利用してコンピュータ操作を行っていただければと思います。通称黒い画面といわれる「コマンドライン」これ全部打ち込むわけじゃないのでご安心ください。Web制作には黒い画面が必須な時代に現役のWeb制作者の方からすると「何をいまさら」といった感じでしょうか。たしかに僕もそう思います。この黒い画面を利用せず、2010年当時の古い手法でサイトを制作されている方もまだまだ沢山いらっしゃいます。別にその方法が悪いとは言いませんが、最新の制作環境を用いた制作といわゆるオールド・スクールでの制作。同じサイトを制作するにしても作業時間には歴然な差が生じます。このマルチデバイス全盛の時代に従来の制作スピード、フローでは太刀打ちが出来なくなっている現状です。Report従来の手法で、現在のマルチデバイスに対応しようと思うと相当の時間がかかってしまいます。当たり前の話かもしれませんが、Web制作の費用は作業時間に比例します。なると自然と仕事は作業時間が早い人の方へ流れてゆくものだと思います。黒い画面を利用して最新の制作環境を整えると、作業時間が短縮出来るだけではなく、Web制作を行う中で起こり得る様々なトラブルも未然に防ぐことが可能になります。DreamweaverとPhotoshopが使えればOKな時代ではなくなっているわけです。ライブラリのダウンロードもコマンドラインから例えば皆さまご存知のBootstrap。このようなライブラリはZipでダウンロードすることが多かったと思います。bootstrapと実行すればほんの数秒でBootstrapを利用してサイトを制作するのに必要なファイル一式を揃えることが出来ます。--locale=jaと実行すればWordPressの最新版のファイル一式をダウンロードすることが出来ます。WordPressが数秒でWordPressのファイル一式が数秒で。SassなどのCSSプリプロセッサもコマンドラインでWeb制作者の方ならほとんどの方が使用していると思われるCSSプリプロセッサ。日本で利用率が高いSassなんかは何らかのGUIを使って利用することも可能ですが、そのバージョンアップの速度は恐ろしく早く、GUIのアップデートが追いつかないという現状もあります。※SassとはCSSをプログラムチックに書くことができ、コーディング効率やソースコードの保守性を向上させることがかのうな拡張言語です。Sassの頻度の高いバージョンアップにも柔軟に対応できます。なれるとGUIを利用するよりはるかに使いやすいです。Sassだけではありません。HTMLもほとんど生身のままでは扱わずJadeなどのテンプレートエンジンといったものを利用して制作を行います。これらにも同様のことが言えます。パワーの弱いマシンなどで色々と立ち上げて制作を行うと、せっかく効率よい方法をとっているのに処理速度が遅くなってしまっては本末転倒です。(言い過ぎですかね笑)また、最近ではコマンドラインを利用したインストール方法しか記載されていないライブラリなどもあります。Zipでダウンロードがオールド・スクール扱いを受けることもgulpで色々と自動化してコーディングを簡単にすることも今まででしたら手動で行っていた、ブラウザのリロード画像の圧縮CSS,JSの圧縮CSS,JSの結合なんかもgulpを利用すると自動でマシンに行わせることが可能です。※gulpとはタスクランナーの一つで、事前に登録した作業を自動で行ってくれます。gulpで効率のよいコーディングをしかしながらこのgulp、またはgulpを動かすために必要なツールもコマンドラインからでしかインストール、利用することが出来ません。Googleのスターターキットもコマンドラインでマルチデバイス対応制作を目的とサイト制作のスターターキットをGoogleが配布しています。このキット、簡単に言うと最新のWeb制作技術が詰まっているとても嬉しいキットです。最新のWeb制作技術が詰まっているWebスターターキットこのスターターキットはgulpを利用して構築されているので、動かすにはコマンドラインを操作する必要があります。コマンドラインを利用したウェブ制作は既にスタンダードGoogleがこのようなスターターキットにコマンドラインで扱うものを使っているということは、もうすでにこれらの方法がスタンダードということになります。なにでも始めることに対して早いに越したことはないですが、やるとやらないでは大きな違いです。皆さまこれを気にコマンドラインの操作に対して興味をもっていただければ幸いです。次回はコマンドラインの簡単な使い方というか、よく使うコマンドをご紹介したいと思います。Posts【企画書やチラシにひと工夫】ビジネスに即役立つデザイン10のコツ。【アメリカで大人気!】自分の似顔絵をアメコミ風マンガみたいに作成出来て遊べるアプリBitstripsが面白い!Macのアプリアイコンを自分好みにカスタマイズ!WordPressに画像付き記事をCSV一括登録するなら【セキュリティ編】Macを購入したらやっておきたい初期設定など変圧機って必要?オーストラリアの電圧についてシドニー近郊でカンガルーと遊ぶならモリセット(morisset)がおすすめ!Macユーザー必須の神アプリAlfredでMacをより快適に使いこなす!jQueryプラグインを利用して簡単に動きのある表現を。Chrome5周年】Chrome×初音ミクにみたウェブの可能性POSTSCOMMENTSTAGSRecentArchivesTagsRecent手軽にデザインのインスピレーションを。