◆ はじめに
皆様、あけましておめでとうございます。
エンジニア就活生を応援するメディア「Career Tech」です。
2018年も皆様のお役に立てる記事を配信していきたいと思っておりますのでどうぞ今年も宜しくお願い致します。
それでは本年、一発目の記事に参りましょう！
最初のテーマ、それは「Webパフォーマンス」と呼ばれる分野についてです。
実はこのWebパフォーマンス、近年動向が注目される分野の一つであり、昨年は相次いで「Webパフォーマンス」だけで２冊出版されるほどの勢いがありました。
今回は、特にフロントエンドエンジニアを目指す人には是非ともチェックしていただきたいと思います。理由は後述しますが、実はフロントエンドがWebパフォーマンスにおいて重要な部分を占めるからです。
それではそもそも、Webパフォーマンスとはなにか？そしてなぜ重要なのか？といった基礎知識を、知っている方もおられるかもしれませんがおさらいしたいと思います。
◆ Webパフォーマンスの基礎知識
Image by Unsplash
そもそも「Webパフォーマンス」とは？
そもそも「Webパフォーマンス」とはいったいどういったものを指すのでしょうか？
Webパフォーマンスは具体的にWebの２つの速度を速めることを意味します。
一つ目はページロードの速度について。これはページロードを速めることで、ローディングする時間をなるべく少なくすることです。二つ目はランタイムの速度です。例えばWebアプリの場合、UIを操作してレスポンスまでの時間を意味します。これらの２つの速度を速めることが「Webパフォーマンス」の向上につながるのです。
なぜ「Webパフォーマンス」が重要なのか？
本当にWebページを高速化することは重要なのでしょうか？
日本でもトップクラスのUXデザイナーである深津氏は、速度についてこのようにツイートしています。
このツイートでは冗談のように「0.1秒遅くなると-1%の損失」と書いてありますが、実際にMicrosoftとGoogleの共同研究によると、１ユーザーあたりの売上が0.5秒の遅延で-1.2%、1.0秒の遅延で-2.8%、2.0秒の遅延で-4.3%と、売上に直結することが分かっています。ECサイトでは0.1秒でも早くすることが売上を上げることの要因の一つであることは、もはや常識のように語られています。
それだけに、パフォーマンスはWebに依存したビジネスでは重要視されるわけです。
特に現代においては、PCと比べると非力なタブレットやスマートフォンなどのユーザーが使用するデバイスが多様化し、また、MVNOや電波の不安定さなどの要因でモバイルによる低速回線からのアクセスが増えています。
さらにはWebコンテンツ自体もリッチ化し、より多様なWebの表現が生まれています。
そうした背景も踏まえると、パフォーマンスの重要性は今後ますます高まることでしょう。
なぜパフォーマンス改善がフロントエンドなのか？
皆さんの中には、「Webパフォーマンス」を改善するのはサーバーサイドの役割なのではと考える人も中にはいらっしゃるのではないでしょうか？
確かにサーバーサイドでもパフォーマンスに貢献することは可能です。
しかし、フロントエンドからのパフォーマンス改善に匹敵するほどの効果は得られません。
またフロントエンドを疎かにすると、サーバーサイド側の施策を台無しにしてしまいます。
また、お馴染みのO’reilly Booksなどでパフォーマンスの書籍を多数出版しているSteve Sounder氏の話によると、エンドユーザーに対しての遅延の80%〜90%はフロントエンド側で発生しており、サーバーサイドではなくフロントエンドからの改善を重要視すべきと主張しています。特にリソースをフロントエンドから取得する際に起こるデータローディングでの遅延はフロントエンドでの対処により大幅に改善することが出来ます。
まとめますと、フロントエンドにおいてデータのローディングスピードに対していくつかの施策を取ることで、大幅に遅延を改善することが出来る可能性があるわけです。
◆絶対に行いたいパフォーマンス計測
Image by Cristian Baron on Unsplash
さて、上記の基礎知識をおさらいしたところで、それらに照らし合わせてパフォーマンスの改善方法をお伝えしたいと思います。
パフォーマンスを改善する際のマインドについて
まず初めに書いておきたいことがあります。それはソフトウェア開発でもよく言われる原則の一つでもある、「Mesure, Don’t Guess (計測しろ、推測するな)」という言葉です。
そもそも現状、パフォーマンスが良いかどうか分からない中でパフォーマンス改善策に取り組み、やったつもりになってしまったりパフォーマンスが悪いという状況で、ただやみくもに良さそうな解決策に取り組むことは、最終的に無駄な巻戻り工数を発生させることや、メンテナンス性を大きく損ねることにつながりかねません。
まずは自分のどの部分が悪いのかといったことを把握し、そこから目的が明確な改善策を選択することで改善に取り組むべきです。可能であればどの施策がどれぐらいの影響を与えたかのログを取り、また、定常的にパフォーマンスをテストできる環境を整えることがベストです。
基本的なパフォーマンスの計測方法
専門的にWebサイトのパフォーマンスをチューニングする際、GoogleChromeに搭載されている開発者ツールを使用するのが良いでしょう。
「Network」パネルや「Performance」パネルでは、パフォーマンスの現状を示す多くの情報を得ることが出来ます。
しかし、今回はより簡易的に利用することが出来るパフォーマンス計測ツールの「Page Speed Insights (以下、PSI)」を紹介したいと思います。PSIは、Googleが提供するWebページの速度を測定しパフォーマンススコアを算定、改善すべき項目を表示してくれるという無料ながら非常に優秀なツールです。基本的なパフォーマンスの改善は、このPSIを指針に行うことが推奨されます。スコアを100にすることは非常に難しいのですが、それでも100に近づける姿勢を忘れてはいけません。
使い方は非常に簡単で、Page Speed Insightsのページにアクセスし、パフォーマンスを計測したいページのURLを入力するだけ。
すると診断結果が表示され、具体的に取るべき施策が表示されます。
他にも、昨年からGoogle Chromeの開発者ツールに搭載された「Audits」パネルも簡単に扱えて、かつ本格的な測定が可能です。AuditsパネルはGoogleのOSSのひとつである「Lighthouse」という評価の高いWebパフォーマンス測定ツールの技術を流用しています。
Image by Lighthouseでwebサイトのパフォーマンスを計測する - Qiita
通常の状態では開発ツールの「>>」ボタンに隠れているためそこから表示して下さい。
「Perform an audit...」ボタンを押すと、パフォーマンスの測定が開始されます。
Image by Lighthouseでwebサイトのパフォーマンスを計測する - Qiita
このように色々なページについてのパフォーマンスの指標が表示され、結果が表示されるだけでなく、改善策も提案してくれます。指標は細分化されているため、ここでは説明を省略しますが、詳しく知りたい方はこちらのQiitaにまとまっておりますので、こちらを参照ください。
参考リンク：
Lighthouseでwebサイトのパフォーマンスを計測する - Qiita
PSIもAuditsも、ウェブ上に公開されているものを計測対象とするためPSIの場合は「psi-local」というローカル環境専用のソフトをインストールし、コマンドラインから実行する必要があります。Auditsの場合は、ローカルホストを立ち上げ、サイトを確認することで、普段通りにブラウザから使用することが出来ます。
◆現場で頻出！本質的な改善方法とは？
パフォーマンスを上げるためには、前述の通り、計測した結果を見てどういった遅延が起きているかを見ることで改善策を立てることが必要で一概にどの施策が良いのかと言った話をすることは出来ません。
ただし、現場でよく使われる改善施策は存在します。それは以下の施策です。
１、画像を最適化する。
２、HTML/CSS/JSを圧縮する。
これら２つの施策の共通点としては、最適化することで同じ品質のサイトでもダウンロードしてくるリソースのサイズが小さくなるという点です。まさにWebパフォーマンスを改善する上での最初の一歩とも言えるでしょう。
これらの施策について、そもそもなぜ行うべきなのか、本質的な部分にフォーカスしながら、具体的な改善方法も含めて見ていきたいと思います。
◆１、画像を最適化する
最適化された画像とは？
そもそも理想的な画像とは一体どういったものでしょうか？
それは「意図する表現を、可能な限り最小化されたデータ量で表現したもの」です。
例えば、ひと目見ただけでは違いの分からない写真があったとして、一方は3MBで、もう一方は300KBとします。
当たり前に思うかもしれませんが、そうしたケースでは300KBの画像を採用すべきです。
なぜならばデータをダウンロードする際のデータ量が小さくなり、表示速度が上がるだけでなく、ページを表示する際のブラウザの処理も軽くなるため、結果的に二重の意味でページが高速化されるからです。
これらの最適化が行われていない場合にパフォーマンスが落ちてしまう現象を皆さん見たことがあると思います。
スマホなどから低速通信を行った際に、画像が上から徐々に表示されるという経験をした人も多いと思いますが、あれはスマホの低速回線に対して最適化されていない画像が使用されているため、ダウンロードが遅くなり、まさにパフォーマンスが落ちている状態です。
では、現場ではどのようにして画像を最適化しているのでしょうか？
実際の施策について見ていきましょう。
画像を最適化する方法【その一・画像形式編】
皆さんはどのような画像ファイルの形式をご存知でしょうか？
Webでメジャーな画像形式はJPEG、PNG、GIF、SVGなどの形式でしょう。
全て画像を表示するための形式ですが、それぞれ得意な領域が違っており、イメージの種類によって現場では使い分けられています。
例えばJPEGは写真の表示に優れた形式であり、写真のイメージファイルはJPEG形式に変換することでサイズを小さく出来る傾向があります。
それぞれ特徴を知ることで最適な形式に変換し、サイズを最小化してみましょう。
まずはJPEG形式です。この形式は、優れた圧縮アルゴリズムによりドットのカラーを人には判別出来ないレベルの近い色に置き換えるためほとんど劣化していないように見える画像であっても、ファイルサイズを劇的に減らすことが出来る点が特徴的でWebで写真を小さなファイルサイズで表示させる場合に適しています。
しかしながら、アイコンや文字の入った説明用画像に使うとボケてしまう欠点があります。
次にPNG形式です。PNG形式は写真からアイコンまで幅広く使用される形式で、特徴としては透過を半透明も含めて自由に使用できる点です。
全ての種類のイメージに対して汎用的に適しており、画質としては綺麗ですが、その分サイズが大きくなる傾向があります。
そのため前にも述べたとおり、写真の圧縮に関してはJPEG形式が適しているためJPEGの苦手な部分である、アイコンや文字イメージによく使われます。
そして、GIF形式です。Twitterなどで動く画像を見たことはありませんか？
あのアニメーション画像は総じてGIF形式で制作されています。
特徴の一つとしては、そのアニメーションが使えるという点。
もう一つは1980年代から開発されているため、そのころの低速な回線でも使用できるように設計されていることに由来する画像サイズの小ささです。
ただし、サイズが小さくするため256色しか扱えず、あまり多彩な表現は出来ません。
また透過を使用できますが、PNG等は半透明なども扱えるのに対しGIFは不透明か完全な透明の２つの状態しか扱うことが出来ません。
そのため、単色のロゴやシンプルなボタンの画像などに使用されることが多いようです。
最後にSVG形式です。今まで紹介した３つの画像形式と明確に違う点としてベクター形式という画像形式であることが挙げられます。
下の画像を見てみてください。左側がさきほどまで説明していたJPEG、PNG、GIF等を拡大した際の表示です。これら３つはビットマップ形式と呼ばれ、多くのドットが集合し画像となっています。しかし、今回紹介するSVG形式は右側の画像のように「点と線」によって描かれます。この手法をベクター形式と言います。
Image by キャラクターをアニメーションさせる１
単純な話、半径10cmの円を描く時に、点をいっぱい打って描くのがビットマップに対し、円を書いて塗りつぶす描き方をするのがベクターです。
単純な図形や文字などを画像にするケースではSVG形式の方がサイズ的に優れているだけでなく、点と線での描画のため、画質という概念がなくどれだけ拡大してもイメージが荒れることはありません。
また透過やアニメーション、CSSの指定によるカラーの変更などにも対応しています。
なぜこれだけ豊富な機能を有しているにも関わらず、あまりメジャーでないかと言うとブラウザが近年、対応を発表したばかりという背景があり、まだまだ他の画像形式と比べるとWeb業界的には新しい形式だからです。
SVGの弱点としては、複雑なイラストや写真に関しては複雑性が増すほど、点と線が多くなるためサイズが肥大化する可能性があるため、サイズには注意が必要です。
また、現状ではメジャーなブラウザのバージョンでは対応していますがAndroid2.3以下・IE8以下などのレガシーブラウザでは表示されない場合もあるのでこちらも注意が必要です。
Image by SVG | Can I use…
つまり、現状のベストプラクティスとして写真を使う場合はJPEG形式を、会社のメインロゴなど重要なロゴの場合はSVG形式を、イラストや文字を使用した画像はPNG形式を、単色や透過などでサイズをできるだけ小さくしたいパーツはGIFを、それぞれおすすめします。
画像の最適化にはこれらの形式の使い分けが必要です。
画像を最適化する方法【その二・圧縮編】
画像形式を最適化したところで、次にWebに合うように圧縮していきます。
まずはファイルサイズを小さくするために、画像をリサイズする必要性があります。
例えば横幅が3000pxの画像と1000pxの画像では、後者のほうがファイルサイズが小さくなるのは当たり前の話ですよね。
一般的にWeb向けイメージの場合、800〜1000pxの横幅になるのが理想と言われています。
またリサイズに関しては、Macの場合、標準ソフトのプレビューから行うことが出来ます。
プレビュー＞ツール＞サイズを調整 を選択すると、リサイズウィンドウが開きますので、リサイズしてみてください。
リサイズ後のファイルサイズも表示されるので便利ですね！
画像サイズを最適化したところで、ソフトによる圧縮もご紹介したいと思います。
ソフトによる圧縮方法としては、JPEGminiというソフトが有名です。
有料サービスにはなりますが、ブラウザ上で無料で試すことが出来ます。
以下の画像はオリジナル画像から1/6まで圧縮した画像の例になります。
ちょっと見ただけでは、比較した際の差異を全く気づけませんよね！
またMacアプリはImageOptimというフリーソフトもオススメです。
ウィンドウにドラッグ＆ドロップするだけで変換が開始されるだけでなく、jpeg、png、gifなどの多くの画像形式に対応しているため、入れておいて損はないアプリのひとつです。
こちらのサイトから無料でダウンロード出来ます。
他には、Node.js製のパッケージに「imagemin」というものがあります。
`npm install -g imagemin`
からグローバルインストールし、npmで通常通り
`npm install -D imagemin-cli`
と入力し「imagemin-cli」というパッケージをインストールすることで、コマンドラインから使用し、画像を圧縮できます。各形式で追加すべきプラグインが変わってくるため、それぞれの画像あ形式でオススメのimageminプラグインを挙げておきます。
・JPEG圧縮用プラグイン「imagemin-mozjpeg」
・PNG圧縮用プラグイン「imagemin-pngquant」
・GIF圧縮用プラグイン「imagemin-gifsicle」
・SVG圧縮用プラグイン「imagemin-svgo」
こちら全てのプラグインを一括でインストール出来るコピペ用コマンドはこちら。
`npm install -D imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo`
また、これらのプラグインをgulp等のタスクランナーで使用することで
ビルドプロセスに組み込むことも出来ます。一度設定してしまえば、自動的に適用され高速化を実現できますのでぜひ試してみてください。
◆２、HTML/CSS/JSを圧縮する。
コードの圧縮とは？
コードの圧縮について、ご存じない方は驚くかもしれませんが、実はHTML/CSS/JSは圧縮(minify化)することが出来ます。
一般的にHTMLやCSS、JSのファイルはコーディング時に可読性を高めるため改行や空白、インデントをつけますよね？実はこれらの改行コードや空白についてもファイルサイズに影響してしまうのです。Webパフォーマンス分野では、ファイルサイズは小さければ小さいほど高速化するとされます。
そのため、コードをデプロイする前に、一度これらの改行や空白、インデントをコードに影響を与えない範囲内で、削除することでファイルサイズを小さくしより良いパフォーマンスにつなげる必要があります。
もちろん、一枚のLPのような小規模サイトではあまり影響はないかもしれませんが大規模プロジェクトになればなるほど効果が生まれる施策でしょう。
具体的な圧縮方法について
PSIでパフォーマンスを測定する際に、圧縮をしていないコードを検知すると圧縮ファイルを自動生成してくれるため、それらのファイルをダウンロードの後に、再度アップロードすることで対応することが出来ます。
ただ、前述の画像の圧縮と同じように、ビルドプロセスに組み込むことも可能です。
こちらでもオススメのNode.js製パッケージを、テキストソースごとにご紹介します。
・HTML圧縮用プラグイン「html-minifier」
・CSS圧縮用プラグイン「clean-css」
・JS圧縮用プラグイン「uglify-es」
こちらのプラグインを一括でインストール出来るコピペ用コマンドはこちら。
`npm install -D html-minify clean-css uglify-es`
◆まとめ
いかがだったでしょうか？
「ハイパフォーマンスWebサイト」や「続・ハイパフォーマンスWebサイト」が
それぞれオライリーから2008年・2010年に発売されて以来、Webパフォーマンスに関する書籍は出版されてきませんでした。
しかし、2017年には相次いで「Webフロントエンド ハイパフォーマンス チューニング」、「超速! Webページ速度改善ガイド｜WEB+DB PRESS plus」が出版され、フロントエンド領域でのWebパフォーマンスについて、業界内から注目が集まっています。
また、表示速度をさらに向上させる「AMP」といった技術やネットワーク処理でのネックを取り除く、「Service Worker」等を複合させた「Progressive Web App」といった新しい技術をGoogleが推進しており、ますますフロントエンドの領域が広がっています。
そしてこの流れは今年だけでなくこれからのフロントエンドのトレンドとなることは間違いないでしょう。
この記事をここまで読んでいただいたフロントエンド領域を志す学生の皆さんはまさにこれからの時代を生きるエンジニアです。
就活において技術的なスキル差をつけるためだけにかぎらず、エンジニアとしてのキャリアの歩みを進めていく中で、今回ご紹介したWebパフォーマンスを強く意識することで、より品質の高い、ワンランク上のプロダクトを世界に提供してほしいと心から願っております。
以上、「Webパフォーマンスの基礎知識と絶対に欠かせない施策を総まとめ」でした！
参考図書：超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)
※2018/12/12 追記
AMP対応が正常に完了しているのかを確認するためのAMP確認ツールを利用すると良いと教えていただきました。
ランキング
-
1
就活生必見！達人たちから学ぶプレゼンの極意【スライドデザイン編】◆ はじめに皆さん、こんにちは。エンジニアを目指す学生を応援するメディア「Career Tech」です。前回の記事ではプレゼンにおいて「構成」という要素が重要であることをお伝えさせていただきました。「構成」という武器を使うことで、より自らのプレゼンを印象づけるヒントとなったのではないでしょうか？ 今回は、プレゼントと言うと思い浮かべるもう一つの重要な要素、「スライドデザイン」について、プレゼンの達人たちを具体的な例として、学んで行きたいと思います。◆ イケてるスライドデザインはプレゼンをより魅力的にするPhoto by Freepikさて、スライドデザインを良くすることで、どのようなメリットや効果を得ることが出来るでしょうか？ 最も強い効果として挙げられるのは、退屈なプレゼンに対して惹きつけることが出来るというものです。 人間が集中力をキープできるのは３分までとも言われています。 そうした中で、いかに素晴らしい構成や準備を進めていても、そもそも人間には理解することが出来ません。 しかし、デザインとはそもそも「見ている人間を惹きつける」という基本原理のもと、生み出された学問です。これをプレゼンに応用しない手はありません。 ご存じの方も多いかとは思いますが、ここではTEDをお手本にしてみたいと思います。 TEDというのは「広める価値のあるアイデア」というスローガンのもと、カンファレンスを開催しているNPOであり、インターネット上で多くの高品質なプレゼンテーションの動画を公開しています。 今回はそんな中でも、東大入試の合格を目指す人工知能「東ロボくん」の開発者でもある新井紀子さんのプレゼンテーションを例に挙げたいと思います。 まずは、実際のプレゼンテーションを見てもらうと良いと思います。新井紀子: ロボットは大学入試に合格できるか？ | TED Talk | TED.com新井さんのスライドデザインは決して派手なものではありませんが、あとに述べる基本を守り作られています。実際のところ、皆さんも研究発表などで「証拠となる数字やデータを示し、自分の主張に正当性を持たせる」といったようなプレゼンを行ったことはあるのではないでしょうか？まだという方もこれからそのようなプレゼンを行う機会はまだまだあると思います。そういった発表をする時は、ついついデータを並べたり、文字で説明をしようとしたりしてデザインを蔑ろにしてしまう事ってありますよね？しかしながら、これから学ぶデザインにおける重要な法則をいくつか守ることでより今までのものから、ワンランク上のスライドデザインへとレベルアップすることが出来るようになると思います。◆ イケてるデザインを構成するための４つのデザイン原則今回は、多くの読者から支持を受け、20年以上前から読まれ続けている大ベストセラー、非デザイナー職向けのデザイン本の大家である「ノンデザイナーズ・デザインブック」からスライドデザインにおいて本当に重要なデザイン原則を４つご紹介したいと思います。近接まず初めに覚えたいのは、近接の原則です。近接とは「関連した情報をまとめてグループ化し、近づけること」であり、図にも示されている通り、同系統の情報を近づけることや見出しとテキストを固めて配置することでより視認性を高め、また情報を伝える際のノイズを省くことが出来ます。 パワーポイントでは箇条書きのテンプレートが主ですので、勝手にこの原則が当てはめられていますが自由配置を使用した際に、情報がバラバラになってしまうことがあると思います。 しかし、近接の原則を意識するだけで、情報を正しく配置することが出来ます。整列 次に意識しておきたいのが、整列の原則です。 整列とは「関連した情報の始まり部分や終わり部分を揃えること」ということで、行頭や行末を揃えることによって、脳が勝手に見えないはずのラインを引き、そして情報を無意識下で追いやすくなること意図しています。 こちらもノイズが入りづらくなり、より集中してプレゼンを聞いてもらうことが出来ます。反復 次もそんなに難しくありません。反復の原則です。 反復とは「デザイン上の特徴を何度も繰り返すこと」であり、装飾やフォントに見出しの意味をアンカリングし、よりプレゼンを理解しやすいものにします。 また見た目を画一的なものにすることで、退屈なスライドにデザイン的なリズムを生み出し、視覚的にも面白さを加えることが出来ます。 見出し項目や箇条書きには、このフォントでこのサイズと決めておくと良いかもしれません。コントラスト最後にコントラストの原則です。 コントラストとは「対比」のことであり、「はっきりした違いを生み出すこと」です。 この原則も、情報の整理に貢献するだけでなく、視覚的に飽きさせないというスライドデザインを作る上で欠かせない役割を担っています。 注意を働かせたい部分のみを対比することで、目線をキャッチし、もしも興味があれば、より詳しい内容をその下に書いてある説明から読み取ることが出来る、そんなスライドとして仕上がるため、あとで配布資料としてスライドを配る場合にも有効な原則です。◆ スライドデザインを1ランク上げるための小技さて、デザインの４原則については学ぶことが出来ました。 これらの原則を使い、今からスライドデザインを始めてもらいたいところですが、あなたのスライドをもう一歩洗練されたものにするためのちょっとしたテクニックもご紹介したいと思います。 スタイリッシュな色を選ぶための方法イケてると言われるスライドの共通点として、かっこいい色を選んでいるケースが圧倒的です。 今でデザインの原則についてきて述べた通り、もちろん色にも法則性があります。まずは、 １、背景色 ２、文字色 ３、注意を惹かせたい色 の３色を決めてください。 そしてこれらを4:2:1の割合で使ってみてください。 それだけでも十分効果があるかと思います。更に、イケてるスライドデザインの多くは、同じ赤でも、くすんだものや蛍光っぽものまで色々な赤から最適なモノを選び抜かれているようで、一方で自分がスライドを作る際には、あまりの色の多さに「なにを選べば良いんだ…」と絶望してしまうことが多かれ少なかれあるかとは思います。 色選びに失敗してしまっては、色の割合が正しくても元も子もないデザインとなってしまいます。配色が苦手、色彩センスが欲しい、そう感じているあなたにオススメのサイトがあります。 それがAdobeが公開している色見本サイト、Adobe Color CCです。Adobe Color CCこのAdobe Color CCを使うことで、色々な色の組み合わせから、自分の好きな色の組み合わせを選べるだけでなく他のユーザーからのお気に入り数を参考にした人気順に並べ替えることも出来ます。 大体の場合は、このサイトで上位に来ているカラーセットを選ぶことが得策でしょう。私も色彩感覚が乏しい方だと思っているのでいつも使わせてもらっています。そんなわけでとてもオススメです！ Adobe Color CCイケてるフォントを選ぶための方法イケてるスライドデザインの共通項として、もちろんフォントについても避けられない要素の１つです。 多くの方が犯しがちなミスなのですが、デザインの経験がない人がスライドをデザインする場合、基本的には、１つのスライドファイルにつき１つのフォントをずっと最初から最後まで使うべきです。 反復の原則でも出てきましたが、途中でフォントを変えることで聴衆を混乱させてしまう可能性が生まれるからです。 日本語のフォントを選ぶ場合、Widowsをお使いの方は「メイリオ」を、Macをお使いの方は「ヒラギノ角ゴ」を選択することをオススメします。多くの場合、これらのフォントを選んでおいて間違いはありません。 もしもこだわりたい方がいらっしゃった場合のためにお話すると、 無料フォントでもスペックが高いのが、GoogleとAdobeが共同開発した「源ノ角ゴシック」です。 こちらはAdobeのサービスであるTypeKitにて、入手可能です。 とても使い勝手が良いので、可能であればインストールしておくことをオススメします。 無料でも使える!? Typekitまとめ：16年春【正しく知り活用しよう】 | Adobe Creative Station日本語のフォントを選ぶ場合、Widowsをお使いの方は「Arial」を、Macをお使いの方は「Helvetica」を選択することをオススメします。そもそも、「Helvetica」はフォントの王様と言われており、多くの有名企業がこぞって企業ロゴに採用しています。日本ではPanasonicやMUJIなどが代表例でしょう。 マイクロソフトがそのHelveticaを真似て作ったのが「Arial」ですので、こちらもこの２つを選んでおけば、まず間違えることはないでしょう。こだわりたい方にオススメのフォントとしては「Roboto」というフォントが挙げられます。Googleが開発したこのフォントはAndroidやGoogle Chromeのフォントとして採用されており、上記の２つのフォントと比べて、やや細身な文字が特徴です。こちらもGoogleFontsより無料でインストールできます。 Roboto - Google Fonts文字をジャンプさせる上の図を見ていただくと、直感的に意味がわかるかと思います。 もしもあなたが「2020年卒」であることを伝えたい時、上と下のどちらを選ぶでしょうか？ もちろん下のほうが強調されたデザインになっていることは言うまでもありません。 このように伝えたい一部分だけ、フォントサイズを変えて大きくすることでデザイン的にスタイリッシュな見た目に変えることが出来るだけでなく、なにを伝えたいのかという部分でメリハリをつけることができます。 ◆ まとめ「スライドデザイン編」、いかがだったでしょうか？ 就活を始めていらっしゃるエンジニア学生の皆さんが、今後どういった機会でプレゼンをされるのかは分かりません。 もしかしたら、逆求人イベントなのかもしれませんし採用面接でプレゼンを求められる場合もあります。 しかし最後まで、意識していただきたいのは「プレゼンは相手になにかを伝えるための手段に過ぎない」ということです。 ・自分が本当に伝えたい核となるメッセージは何なのか？・相手にどういった行動を起こしてほしくてプレゼンするのか？ ・相手にとってのメリットはなにか？というような構成編で学んだ、プレゼンの必須要素を意識し、そこに向けて必要なプレゼンのスライドを、コアを伝えるためにデザインし、実際にプレゼンをして伝える。 自分は凄いとおごるためでもなく、自分のスライドデザインは凄いといばるためでもありません。 あくまでも相手に伝えるという手段であることを、最後まで頭の片隅で意識していただけるとありがたいです。 この２回の連載を活かし、構成、そしてスライドデザインで差をつけ、自分の理想とする未来を実現するための手助けとなることを期待しています。頑張ってください！参考書籍：ノンデザイナーズ・デザインブック [第4版]／Robin Williams／マイナビ出版 -
2
新卒ITエンジニアの面接対策プロのエンジニア就活アドバイザーが教える就活ノウハウ 面接の形態として最も一般的なのは、１次面接・２次面接・最終面接というフローです。もちろん、企業によって回数、評価基準などは違うため、一概には言えませんが、それぞれの面接でどのような事が聞かれるのか、おおまかな質問内容の傾向と対策をご紹介します。 目次 ◆ 新卒ITエンジニアの面接で聞かれる内容と対策 ◆ 面接を通して企業がチェックしているポイント ◆ 面接で落ちるNGワード ◆ 終わりに：面接前にしておくべき心構え ◆新卒ITエンジニアの面接で聞かれる内容と対策人のせい・環境のせいにする発言 面接で様々な質問を投げかけられると、どうしても良い事や華々しい成果ばかり伝えるわけには行かず、失敗した事や、成果が出なかった事について話さざるを得なくなります。しかし、失敗や成果が出ない事は全く悪いことではありません。企業は、それを通して何を学んだか？どんな風に解決したかを見ています。そのため、失敗や成果が出なかった事に対して思慮深さを見せられるように意識しましょう。 その中で、絶対に言ってはいけない事は、周りや環境のせいであるという旨の発言です。なぜ失敗してしまったと思いますか？と聞かれた時に、「チームメンバーがダメだったからです。」と応えてしまったら、思慮深さをアピールする事はできませんし、企業側に「自己改善ができない人間なのだな」という印象を持たれてしまいます。 そのため、人のせい・環境のせいにする発言は控えましょう。どんな状態であっても、その中で自分が何ができたかを考え、それを発言するようにしましょう。 第一志望でないこと告げること 面接では、あなたが入社する意志があるかどうかが常に判断されています。内定を出すという事は企業にとって、大きなリスクだからです。学生が内定を辞退する事は自由ですが、企業は一旦内定を出してしまうと、それを取り消す事ができません。限られた内定枠を出しても良いか？確実に入社してくれるか？を常に考えています。 「他に志望している企業を教えてください」と言われた際に、他企業の名をあげたり、他者の選考状況を正直に告げる事は構いませんが、第一志望でないと告げてしまうと、その時点で選考通過できなくなってしまう場合もあります。 明らかに、第一志望でない事がわかるような発言は控えましょう。 終わりに：面接に対する心構え 企業は、採用活動を始める前に、今年はどのような人材が、何人必要なのかを整理し、人事計画を練っています。いかに優秀な人材であっても、その企業の人事計画に反していたり、アピールするポイントがずれてしまっていたりすれば、採用されない場合もあります。事前に、採用情報を取得したり、OB訪問したりなどすることで、企業の求める人材像がどのようなものなのか知ることも大切です。自分に嘘をつく必要はありませんが、自分の魅力と、企業の求める要素が噛み合うように話すことを意識しましょう。 -
3
面接官を唸らせる逆質問とは？プロのエンジニア就活アドバイザーが教える就活ノウハウ 面接前に逆質問の準備はしているでしょうか？逆質問は、時に合否を左右するほど重要なものですが、しっかりと対策をしている学生は少ないように思います。今回は、逆質問の事前準備が大切な理由と、逆質問を考えるポイントをご紹介します。 目次 u なぜ逆質問の事前準備が必要なのか？ u 逆質問の考え方のポイント u 終わりに：大切なのは'時間を有効に使うこと' ◆なぜ逆質問の事前準備が必要なのか？ 面接は、基本的に面接官が学生に向けて質問をすることで進行します。それとは逆に学生が面接官に向けて質問することを逆質問と言います。面接の最後に面接官から「何か質問はありますか？」と聞かれたら、逆質問の始まりです。逆質問は、多くの場合選考の一環とされており、逆質問も含めて面接官は学生を評価しています。面接の準備をするのと同様に、逆質問でどのようなことを聞くかもあらかじめ準備しておくべきなのです。 逆質問は基本的に面接時間の最後に設定されています。そのため、面接官が最後に学生に抱く印象は逆質問によって大きく左右されます。逆質問によってそれまでよかった印象が下がってしまうこともありますし、逆に印象が良くなることもあります。しっかりと準備をして面接官の好感度をあげられるような質問をすることによって、面接官に良い印象を残して面接を終えることができるのです。熱意や入社意欲を伝えられる 逆質問によって、熱意や入社意欲を面接官に伝えることができます。 例えば、競合と比較した企業の弱点や課題についてや、今後の事業方針についてなどの質問です。業界や企業知識を織り交ぜた質問することで、企業に対しそれなりの時間を使っているということ面接官にアピールすることができます。「この学生は本当にうちの会社に入りたくて努力をしているんだ」ということが伝われば、好印象につながります。今後の選考やキャリアに有意義な情報が得られる 逆質問の時間は、短時間のOBOG訪問のようなものです。そこで得た知識や発言で企業の魅力を再確認できたり、自身の志望動機が具体化されたりすることもあり、逆質問で得た情報が今後の選考において有意義な情報になりえます。 また、「自分がその企業でしたいと思っていることが、入社してから本当にできるのか？」や「この企業で働いた時にどんなやりがいや楽しさがあるか」などを質問することで、入社後の自分の姿をイメージできることができ、企業とのミスマッチを防ぐことができます。 ◆逆質問の考え方のポイント 「逆質問の準備が大切なのはわかるけど、なかなか考えることができない！」という人も多いかと思います。そこで、逆質問を考える上でのポイントを2つご紹介します。①面接官個人の経験に基づいたことを聞く 逆質問に困ったら、まず、「面接官個人の経験に基づいた質問」をしてみることをお勧めします。「面接官個人の経験に基づいた質問」とは、例えば、「なぜこの会社に入社したのか？」「これまで一番楽しかった（辛かった）開発は何か？」「今までどのようなプロジェクトに関わってきたのか？」「今後、その企業でどのようなことをして行こうと考えているか？」などです。 この質問は、業界や企業研究ができていなくてもできるため、気軽に質問できますし、面接官の経験を通して、その会社の雰囲気や、具体的な仕事のイメージが掴みやすくなります。 また、面接官が現場のエンジニアであった場合、これまでどのような開発に携わってきたのか、その中でどのようなことを考え、行動してきたのかなどを聞くことで、その会社が本当に自身にあっているかの検証もすることができます。 ②面接官の考えを聞く 面接官の考えを聞くというのは、例えば、「企業の弱点や課題はなんだと考えるか？」「競合に負けているのはどんな要因からだと思うか？」「今後業界の動向はどのように企業に影響するか」などのように、企業や物事の動向に対する面接官の考え方を聞くことです。 これらの質問から、内部の人間から見た企業の姿や、業界の知識などを得ることができ、業界や企業の理解が深まります。この知識は、今後の面接にも活かすことができるため、とても有効です。