◆ はじめに
皆様、あけましておめでとうございます。
エンジニア就活生を応援するメディア「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
ビジネスモデルでよく聞くB2BとかB2Cって一体、なに？ 色々な取引形態を調べ、比較分析してみた。◆ はじめにこんにちは。エンジニア就活生を応援するメディア「Career Tech」です。 皆さんは今まで「B2C」「B2B」といった単語を目にしたことはなかったでしょうか？ ビジネス系の記事やNewsPicksなど、就活生が目にする記事では頻出の単語です。 今回は、ビジネス系の記事でもよく目にするこういった言葉について解説していきたいと思います。 この記事を通して、企業のビジネスモデルによって、顧客との関わり合い方や、その中のシステムを構築する上での考え方の違いを実感していただき、企業選びの参考にしていただければ幸いです！それでは始めていきたいと思います。◆ そもそもどんな種類がある？そもそも、この「B2C」「B2B」といった言葉は、なにを表しているのでしょうか？ また、これらの単語にはどういった種類があるのでしょうか？順番に見ていきたいと思います。 まず初めに、「B2C」「B2B」といった言葉の意味についてです。 それぞれの詳しい意味は後述しますが、基本的にはすべて、企業の取引形態について示している単語です。 すべてのビジネスモデルには商取引という行為が存在します。そして、誰が誰と商取引を行っているのかを指し示すために使われるマーケティング用語がこの「B2C」「B2B」といった言葉なのです。 一例を挙げるとすると、B2Cは「Business to Customer」の略で、企業と企業の取引を表しています。 では、これらの単語にはどれだけの種類が存在するのでしょうか？ 派生した単語や独自に作られたオリジナルの「○２○」も多数存在しますが、 ・B2C ・B2B ・C2C ・B2B2C といった４つが、取引形態を表す主要な単語になります。 他にも「O2O」といった単語もあります。 販売の当事者（Businessや、Customerなど）を表す単語ではなく、取引をする場所の話にはなるので、今回の記事では軽く触れる程度としますが、O2Oというのは「Online to Offline」の略であり、オンラインからオフラインに顧客を移動させる施策やビジネスのことです。こちらのリンクが参考になりますので、気になった方のためにご紹介しておきます。 O2Oはもう古い? いえいえ、そのアプリO2Oですよ！：Orange EC◆ B2Cとは？Photo by Nafinia Putra on Unsplash企業と顧客の間で生じる商取引 B2Cは、Business to Customerの略であり、企業と顧客との間の商取引のことを指し示しています。 B2Cは世界で最も多く行われている商取引であり、そしてみなさんが知っている大部分の企業はB2C企業でしょう。 当たり前ですが、カスタマーをターゲットとしている企業ですので、知名度がそのまま企業の影響力につながるからです。 そのため、テレビCMなどもよく放映されます。一部の企業を除き、TVCMを打つ企業はほとんどがB2C企業です。 知名度的な観点から就活の人気企業として、ランクインすることが多く、 やはり「知名度の高いあの会社で働きたい」と思う、就活生側の心理が大きく影響しているようです。 これらの会社を就活で選ぶメリットとしては、多くの顧客に製品を届けられる点が挙げられるかと思います。 また、社会的な認知度も高いため、他の人に伝えた場合に、知ってもらっている可能性が高い点も大きなメリットです。 一方で、一企業が不特定多数の顧客にプロダクトを届けるということは、 比較的、ターゲットの粒度が大きめという点がデメリットとして挙げられるでしょう。 「自分の気持ちをこめて、この人のためだけに作りたい」という職人気質の方には不向きかもしれません。これらの企業の例としては、最近ですと動画配信サービスのNetflix社が有名です。 ◆ B2Bとは？Photo by rawpixel.com on Unsplash企業と企業の間で生じる商取引B2BはBusiness to Businessの略であり、企業間における商取引の形態を表す単語です。 ビジネスのターゲットが、企業や法人であるため、わざわざCMなどを打つ必要もなく、多くのB2B企業のケースでは知名度が低くなりがちです。年末年始には、そういった大手B2B企業で働く人が、実家に帰省するため、帰省先での話題や知名度のためにそのために新聞広告やTVCMを打つことがあるそうですが、法人に対して有効なリーチが出来ないため ほとんどTVCM等に広告宣伝費をかけないそうです。無名の企業だからといって、営業利益が低いかと聞かれるとそうではありません。 むしろ、法人という大口顧客を握っているため、利益率が高くなったりと、経営が安定しているケースがほとんどで、無名だが優良企業ということがB2B企業ではよくあります。 B2B企業を就職先候補として選ぶことの利点としては、一企業が一企業に、またはそう多くない複数の企業と取引をする形態が多いため、ユーザーの粒度が小さく、比較的作り込んだり、オーダーメイド的な感覚で、プロダクトの開発に当たることが出来ます。 デメリットとしては、前述の通り、知名度が低い場合が多いため、色々な場面で説明コストが掛かることでしょう。 これらの企業の例としては、最近のIT業界ですとSalesforce社や、日本ですとCybozu社が有名です。◆ C2Cとは？Photo by Igor Ovsyannykov on Unsplash顧客と顧客の間で生じる商取引C2CとはCustomer to Customerを略した単語であり、顧客と顧客によって生まれる商取引を指します。 あくまでもユーザーとユーザー間の取引であり、それを支える企業というのがC2Cの特徴です。 今までこの取引形態で代表例と言われていたサービスはヤフオクなどのオークションサイトでしたが、最近だとフリマアプリのメルカリなども、このC2C企業の代表格と言えるでしょう。プラットフォームを作り、そこで生まれるユーザー間の取引からサービス料を取るというモデルから、安定した企業収益が望めるため、需要の大きい分野で一度普及し、広く使われるツールとなれれば競合相手が戦いづらい参入障壁を築くことができ、長期的に安定した非常に強いビジネスとなります。一方で、他の企業と比べC2C企業で働くエンジニアは、Webサービス自体のパフォーマンスについてや、大量のトラフィックをさばくためのインフラスキルがより強く求められるという側面もあります。これらの企業の例としては、世界的に有名なeBay社や、日本ですと前述の通りメルカリ、ヤフーが有名です。◆ B2B2Cとは？Photo by Alex Kotliarskyi on Unsplash企業と顧客をつなぐための商取引B2B2CはBusiness to Business to Customerを略した単語です。 文字数も増えた分、ややこしい取引形態と思われがちの取引形態ですが、実際には非常にシンプルで、B2C取引、つまりは顧客と企業における商取引を支援をするためのビジネスでありBとCの間の仲介をする企業（つまり、B2Cの間にB2がもう一つ挟まった）という取引形態のことです。 企業が販促のために使うWeb広告の出稿から、人材紹介業、外食産業における予約システム、タクシー会社と乗客をつなげるタクシーサービスなど、最近ではインターネット・IT分野でもB2B2Cの形態でビジネスを行う企業が増えてきています。C2Cなどと同じくプラットフォームビジネスに発展する場合が多いですが、最も大きな違うとしては、C2Cは低単価の案件を大規模に拾い集め、収益に変えるというイメージに対して、B2B2Cは中程度から高単価の案件を小規模、中規模に行い、利益拡大に繋げるという収益イメージが強い分野です。 例で言うと、旅行予約サイトの「じゃらん」は、宿泊施設を営業する企業と、宿泊したい顧客をマッチングするリクルートが経営するWebサービスです。リクルートが手がけるIT系ビジネスはほとんどがB2B2Cであり、リボンモデルと呼ばれる有名なフレームワークを用いることで、社内での新規事業を検討しているとのこと。 下記のリンクから、見ることが出来る動画ではリボンモデルとはどういったものであるかを イメージ出来るかと思いますので一見の価値ありです。 Recruit - The Ribbon Model - 日本語版 - YouTube前述のリクルート以外にも、世界的な企業ではAmazon社が、日本だと楽天が有名です。◆まとめ以上が、取引形態やビジネスモデルにおける、「B2B」や「B2C」といった用語の解説になります。 いかがだったでしょうか？エンジニア志望として就活をする上で、ビジネスモデルから見る企業の大まかな特色や企業やビジネスによってどういったユーザーに向けて開発を進めるべきかといった部分がお分かりいただけたのではないかという風に思います。 記事の中で申した通り、知名度が低い企業でも、B2Bを主としたビジネスを展開していて、経営も安定しているのであれば、 就職希望先の候補の１つとして、積極的に検討して頂ければという風に思います。 Career Selectでは、世間的には知られてはいないものの、業界的にはピカイチであったり、経営が抜群に安定しているといった、いわゆる優良B2B企業も多数ご紹介させていただいております。実際のところ、B2B企業ってどうなの？必要とされるスキルは？といった疑問を持たれている方は、専任のキャリアアドバイザーから実際の現場の話や人事の本音などをお伝えすることも出来ますので、是非、こちらのサポートもご活用いただき、就活ではご自身に合った最善の選択肢を取っていただければと思っております。 詳しくはCareer Selectにてどうぞ。 最後まで拝読いただき、有難うございました。