paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

どれ目指す?IT業界のエンジニア職19種類と仕事内容をまるっと解説

f:id:paiza:20190130180347j:plain
Photo by Matt Madd
f:id:paiza:20180910132940p:plainこんにちは。倉内です。

ITエンジニアというと「アプリケーション開発をする」「コードを書く」などのイメージが強いと思いますが、実際は一口にITエンジニアと言っても職種は多岐に渡ります。

なんとなくは知っていても、実際にどんな業務をしているか具体的には分からないという方も多いのではないでしょうか。

そこで今回はITエンジニアを目指す就活生や他業種から転職したいと考えている方へ、ITエンジニア・IT関連の職種について特徴や業務内容を解説していきます。

自分がどのようなITエンジニアを目指すのかを考える上でも、ぜひ職種について知っておきましょう。

ITエンジニアの業務領域

職種の話に入る前にITエンジニア・IT関連職の主な業務領域や内容を頭に入れておきましょう。

ただし企業によって、また、プロジェクトの種類・規模、採用する開発手法などによって異なるため、大枠としてこういった業務があるんだなと思ってください。

f:id:paiza:20190201172041p:plain

一般的にITエンジニアの業務としてイメージされるのが「プロジェクト管理」「システム開発」の枠内の内容でしょうか。

「インフラ構築」に分類されるサーバやネットワーク、セキュリティといった分野は単語として聞いたことはあっても実際の仕事をイメージするのが難しいかもしれませんね。

IT関連職になりますが、研究開発や品質保証、企画といった業務もあります。

次からはこれらの業務を主にどの職種がやっているのかを説明していきます。

ITエンジニアの職種と業務内容

職種間の境界が曖昧な部分もたくさんあるためきっちり分けるのは難しいのですが、ここでは大きく「開発系」「インフラ系」「IT関連職」の3つに分けてご説明します。

なお、実務では複数領域にまたがって仕事をすることも多くあります。

◆開発系

f:id:paiza:20190201173630p:plain

システムエンジニア(SE)

おそらく一番知名度がある(けど実態はよく分からない…)職種ではないでしょうか。

会社によって違いがかなりありますが、前職のSIerで8年ほどSEをやっていた頃を思い出すと、営業と一緒に提案活動をおこない、要件定義・設計・実装・テスト・運用・保守とすべて経験しました。

上の図のとおり手広く対応できることが求められ、スキル以上にコミュニケーション能力や顧客業務知識が必要になる場面が多々あります。また、各分野のスペシャリストに仕事を依頼して管理する側に回ることが多いのもSEの特徴と言えます。

SEとして経験を積むとプロジェクト管理(PM)を任されることが多いです。

プログラマ(PG)

プログラマと言ってもWebプログラマやゲームプログラマなど幅広いのですが、実装(コーディング)に特化した職種というのが共通しています。

と言ったもののプログラマも定義が難しいというか…開発系ならどのエンジニアもコードを書くことがあるので区別が難しいですよね。

あとに出てくるアプリケーションエンジニアやフロントエンジニアとあえて区別するとすれば、SEが作成した設計書に従ってコードを書くことが主な業務という点でしょうか。場合によっては、詳細設計や単体テストが作業範囲になることもあります。

アプリケーションエンジニア

アプリケーションを指すものとしては、業務系システム、Webアプリケーション、スマホアプリがあります。それらの開発業務をメインにおこなうのがアプリケーションエンジニアと言えます。

上の図では含めていませんが、アプリケーションエンジニアはプログラミング能力はもちろんのこと、ユーザーのニーズを汲み取り提案力や企画力を求められる場合もあります。

開発するシステムによってプログラミング言語はさまざまですが、業務系システムではまだまだJavaの需要が高いです。

組み込み系エンジニア

家電製品や機械などの電子機器の制御に欠かせないソフトウェアを開発するのが組み込み系エンジニアです。

CやC++といった汎用性が高く、高速処理を実現できるプログラミング言語が採用されることが多いようです。

組み込み系エンジニアはなるのが難しいイメージがありますが、IoTの普及や車の自動運転、ロボットといった分野で需要が急増している職種でもあります。

フロントエンドエンジニア

フロントエンドエンジニアも会社によって定義は異なりますが、多くの場合「Webサイト開発によく使用される言語(JavaScript、HTML5/CSS3、PHPなど)を使いこなすことができる高度なWeb制作スキルを持った人」を指すことが多いようです。

デザイナーやディレクターとコミュニケーションしながら、Web制作の技術的なフォロー役になることも求められます。

サーバサイドエンジニア

フロントエンドエンジニアが主に表に見える部分の開発を担う一方、サーバサイドエンジニアは主に表に見えない部分を開発するのが仕事です。

動的処理を実現するためのサーバ側のプログラムを書いたり、データベースやファイルアクセスのためのプログラムを書いたりします。図でも示したとおり、サーバやデータベースの知識が必要になるため「インフラ構築」の業務も一部対象範囲としています。昨今ではセキュリティの知識も求められることも多いでしょう。

サーバサイドエンジニアは、コンパイラ型言語(Java、C、C++など)とインタプリタ型言語(PHP、Perl、Ruby、Pythonなど、完全にイコールではないのですがスクリプト言語とも言われます)の両方を扱うことになります。


開発系のエンジニアを目指す方は、まずプログラミング言語の基礎を学んでみるのもよいでしょう。paizaラーニングでは言語の入門講座をはじめ、Webアプリケーション作成など多数の講座をご用意しています。

詳しくはこちら

paizaラーニング


◆インフラ系

f:id:paiza:20190201174536p:plain

インフラエンジニア

インフラエンジニアと呼ばれる場合は、主にサーバエンジニアとネットワークエンジニアの両方の仕事を担うことになります。それぞれの仕事内容はのちほど説明します。

サーバやネットワークの設計・構築だけでなく、本番リリース後に正常に稼働(動作)させるために運用・保守もします。

インフラ系のエンジニアは開発系のエンジニアのように作ったものを見せることが難しいため、未経験から目指す場合は資格を取得しておくとよいかもしれません。

以降に紹介する職種は、インフラエンジニアに包括されることも多いのですが、専門分野に特化しているエンジニアも存在するため区別して紹介していきます。

SRE(Site Reliability Engineer)

SREは職種というより役割と言ったほうが正しいかもしれませんが、サービス向上のためのパフォーマンス改善、可用性・スケーラビリティ向上などを図るのが役目です。GoogleやFacebookで採用されており、日本でも採用する企業が増えてきました。

SREが従来のインフラ保守・運用業務を担当するインフラエンジニアと異なるのは、システムの改善のために積極的にソースコードの修正をする点です。(そういう意味だとインフラ系のエンジニアと分類していいかちょっと微妙なところですね…)

また、今までは物理サーバを相手にしていたのが、クラウド上のサーバに対して負荷監視やリソース管理をおこないシステムの安定稼働を図る役目になってきたということも挙げられます。

サーバエンジニア

現代は業務システムやWebサイト、ソーシャルゲームなど…システムの種類を問わず、ほとんどの場合でシステム構成にはサーバが存在します。

特に高速な処理速度を求められたり、一度に膨大なアクセスをさばく必要があったりするシステムでは、採用するサーバのスペックや構成などがサービスの質に直結しているためサーバエンジニアの役割はかなり重要であると言えます。

サーバ構築に用いるスクリプトやコマンドを覚えること以上にOS(WindowsだけでなくLinuxなどのUNIX系のOS)やコンピュータアーキテクチャの知識が必要になってきます。

また、悪意ある外部の攻撃からシステムを守るためのセキュリティの知識を要求されることもあります。

セキュリティエンジニア

名前のとおり情報セキュリティを専門にするエンジニアです。ネットワークに一切つながないシステムを除いて、これから新たに構築するシステムでセキュリティの考慮が不要なシステムはほとんどないため今後も需要が増えることが予想されます。

ただし、業務においてセキュリティのみの仕事というのはあまりなく、システム開発やインフラ構築におけるあらゆる箇所でセキュリティ要件について検討し、設計・実装・テストをすることになります。

セキュリティ面のアドバイスや提案をメインにおこなう場合はセキュリティコンサルタントといって区別することもあります。また、法律・関連制度の知識が求められる場面も多いでしょう。

ネットワークエンジニア

ネットワークエンジニアの仕事は、ネットワークの設計、構築、監視・運用です。ネットワークに関する基本的な知識、設置する機器に関する知識などが必須になります。

システム導入と同時に新しくネットワークを構築するような案件の場合、システム開発を担当するエンジニア、サーバ構築などを担当するエンジニアとのコミュニケーションはもちろんのこと、ネットワーク回線をひく場所(例えば、お客様のオフィスなど)の工事関係者や作業日時の調整など…非常に人とのやり取りが多いのも特徴です。

データベースエンジニア

データベースも現代のシステム開発案件で利用しないということはまずないので、データベースの設計や構築、安定運用、また大量データを扱う際のチューニングなどを専門とするデータベースエンジニアは重要な存在です。

ただし、セキュリティエンジニアと同様、実務ではデータベースのみで何かをするというよりアプリケーションとの連携になるため、開発系のエンジニアがデータベースの知識を習得し、データベースの設計・構築まで対応することが多いです。

個人開発でもMySQLやPostgreSQLといったデータベースを利用したことがあるという方は多いのではないでしょうか。業務ではOracleやSQL Serverもよく利用されています。

カスタマーエンジニア(CE)

これまで紹介した職種でも運用・保守の業務を担当することはありますが、カスタマーエンジニア(CE)はシステムの安定稼働のための保守や点検、修理を専門におこなう職種です。監視業務や障害発生時の迅速な対応のためにシフト勤務をとることもあります。

「システムエンジニア(SE)との違いは?」と聞かれることが多いのですが、ソフトウェアに関する業務が多いSEに比べて、CEはパソコン本体や周辺機器の設置、故障や障害時の対応などハードウェアに関することを得意としています。


インフラ系のエンジニアを目指す方は、paizaラーニングシェルコマンド入門講座AWS入門講座がオススメです。なかなか独学では難しい分野でもありますので、サーバ構築の取っ掛かりとして受講してみてください。

◆IT関連職

f:id:paiza:20190201174845p:plain

製品開発・研究開発

IT業界での製品開発・研究開発は、新たなIT製品の開発や技術そのものの開発に携わる仕事です。ソフトウェアとハードウェアどちらにも関わります。これまで挙げてきた職種と比べると非常にクリエイティブな職種と言ってよいでしょう。

最先端技術についての情報を集めたり、それらを活用して何か新しいツールや仕組みを考えたりすることが好きというのはもちろん、根気よく諦めずに研究を続けられるかも求められます。

ITコンサルタント

「ITの活用によって経営課題をどのように解決していくか」を提案・検討するのがITコンサルタントの役目です。企業によってはSE職がコンサルタントの業務まですることもあります。

ITコンサルタントは顧客の感じている課題についてヒアリングし、現状の調査・分析、改善案の提案といった仕事がメインのためコミュニケーション能力やプレゼンテーション能力が求められます。もちろんITを活用した提案をするために、ITの基本的な知識も必要です。

SEのキャリアパスの一つとして、ITコンサルタントへの転職も人気があります。

データサイエンティスト

昨今注目されている職種の1つにデータサイエンティストが挙げられます。

まだまだなり手が少ないこともあり、機械学習エンジニアと同じものとして語られることが多いのですが、データサイエンティストは「統計学や機械学習を用いてデータを分析・解析し、その結果で顧客に価値を提供する」というのが仕事です。どちらかというとコンサルタントに近い職種と言えます。

おそらく将来的に開発系のエンジニアのように分業するかもしれませんが、現在は数学(統計、微積分など)の知識や機械学習のためのプログラミング能力を求められることが多いようです。

paizaラーニングではPythonで機械学習が学べる「Python×AI・機械学習入門編」講座を提供しています。機械学習が気になっている方はチェックしてみてください。

詳しくはこちら

品質管理

ソフトウェアやアプリケーションといったサービスの品質保証(QA:Quality Assurance)をおこなうのが品質管理の仕事です。

開発するシステムの品質目標を設定したり、実際にできあがったシステムをユーザー目線でテストをして品質に問題がないかをチェックする重要な役割です。SE時代はリリース前にとてもお世話になっていました…。

図では左下に置いてしまいましたが、実際は設計書やマニュアルなどのドキュメント検査、テスト工程から納品までのシステムの品質検査など複数の工程にたずさわります。

システム開発の経験・知識があるとQAとしては非常に重宝されるため、SEからQAになる人も多くいます。

社内SE

社内SEはIT企業ではない企業のIT部門で仕事をする場合と、IT企業の社内システムに関わる仕事をする場合の2つの働き方があります。

SEとついているだけあって、社内SEの担当業務も幅広く、社内のシステム全般の開発・運用・保守からネットワークやセキュリティ、また従業員のIT教育や問い合わせ対応などもこなします。

求められるスキルや知識は企業ごとに違いが大きいですが、SE経験のある人が転職先に選ぶことも多いので似たスキルが必要と考えていいでしょう。

セールスエンジニア

セールスエンジニアは営業が自社製品・サービスを販売するのを技術的な面でサポートする仕事です。

専門性の高い業務システムなどは営業のみでお客様に説明をするのが難しいこともあり、そういった場合にセールスエンジニアが活躍します。合わせてお客様が自社製品・サービスをビジネスに生かせるように提案や助言もおこないます。

SEと似ているところがありますが、セールスエンジニアはシステム開発の工程を担当することはありません。ただし、お客様へシステムのデモンストレーションをおこなう場合があるため、そのときにコーディングが必要になることもあります。

まとめ

ITエンジニアと呼ばれる職種とIT関連職について紹介してきました。もちろんここでは紹介しきれなかった職種もありますが、主要な職種については理解していただけたのではないかと思います。

ITエンジニアと言っても本当に多岐にわたる業務領域・仕事内容で、さまざまな役割があります。

一度その職種についたら変えられないということはないのですが、求められるスキルや知識がまったく異なる領域に行くのは大変さもあるので、まずは自分がどんなITエンジニアを目指したいかについてしっかり考えてみていただければと思います。


paiza新卒の掲載求人は、スキルチェック問題を解いて規定のランクが獲得できていれば、事前の書類選考なしで必ず企業の面談を受けられます。また、私服で行けるカジュアル面談を多くの企業が実施しています。

paiza新卒


実務未経験から応募できるエンジニア求人はEN:TRYで多数公開しています。

“EN:TRY"





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック

転職したいエンジニアも意外と知らない、ベンチャーと大手企業の違い

f:id:paiza:20190130170132j:plain
Photo by Mike Cohen
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

転職時の企業選びにおいて「ベンチャー企業と大手企業で迷っている」「どんな違いがあるのかわからない…」といった方のご相談を受けることがよくあります。

ベンチャー企業と大手企業にはそれぞれどんな違いや特徴があるか、どんな人が向いているのか、あるいは向いていないのか…というのは、転職を目指すエンジニアの方なら知っておいたほうがよいでしょう。

よく考えずに転職先を選んで、入社してから「思っていたのと全然違った…」となってしまうのは避けたいですよね。

そこで今回は、ベンチャー企業と大手企業、それぞれの違いや特徴について書いていきます。転職に興味のあるエンジニアの方の参考になればと思います。

ベンチャー企業の特徴

即戦力や自走力に加え、「何でもやる」が求められる

ベンチャー企業の中途採用で求められるのは、基本的に「前職で結果を出した経験があり、それを自社でも再現できそう」ということです。

教育体制が整っていない企業も多いため、入社後は指導らしい指導もなく即実務に入る…といったケースも珍しくありません。

また、業務ごとに細かく分業ができるほど社員数が多くない企業がほとんどです。そのため、仕事では「自分がやりたいこと・得意なことに特化する」よりも「必要があれば幅広い業務に携わる」のが求められます。

エンジニアであれば、開発もインフラ周りもやって、サービス企画やマーケティングにも意見を求められて…みたいな感じですね。(職務範囲については企業によっても異なりますので、企業ごとに面接で聞いたほうがよいでしょう)

これらはベンチャー企業の大変なところでもありますが、逆におもしろみを感じて転職を決める方も多くいます。

また、多少経験が浅くても、実践を通して学んだり、自分なりに考えて試したりするのが好きで、幅広くいろいろできるようになりたい…といった方には向いているかもしれません。

意思決定が早くスピード感がある

ベンチャーの場合、実装できたサービスをすぐにリリースしたり、ユーザーの反応を見ながら追加・変更をしたり…といったことが柔軟にしやすい傾向にあります。(もちろん、それに伴う検証なども必要ですが)

やはり規模が小さい組織のほうが、意思決定のスピードが速いですから、そのぶん現場も早く動ける…というのはありますね。

ベンチャー企業を選ぶ人の中には、そういった仕事のスピード感に魅力を感じている人、また、大手にいたけど意思決定が遅くてなかなか動けなかったのが嫌だったという人が多くいます。

自由度が高い(そのぶん制度などが整っていない場合も)

ベンチャー企業だとやることが多く激務で残業が多いのでは?と思っている方もいるのではないでしょうか。しかし、最近はむしろ成果が出ていれば働き方はゆるめでもOK…といった企業も珍しくありません。

手前味噌ですが、paiza(ギノ)は特にコアタイムなしの裁量労働制で、「今日は銀行と役所に行く用事があるから午後から出社」「今日は子供のお迎えに行くから早めに退社」といったことが自由にできます。また業務中のイヤホンOKで、残業はほとんどありません。

paiza転職では、一部在宅勤務化、原則定時退社、副業OK、イヤホンOKなどなど、こうした自由度の高い条件で求人票の検索をすることもできます。

paiza転職について詳しくはこちら
paiza転職

ただ、立ち上げられて間もないベンチャー企業ですと、そもそも制度や仕組みが定まっていなかったり、自分たちで掛け合って決めたり変えたりしていかなければならない場合もあります。それはそれで大変ですし、やはり福利厚生などの面ではあまり期待できないかと思います。

やはり安定性には欠ける

最近は、大企業であれば絶対安泰…という時代でもないですが、やはり大手と比較するとベンチャーの不安定さはその比ではありません。

大手企業の場合、複数サービスを運営しているからひとつがダメになってもしばらくは大丈夫とか、何かあっても系列企業に転属とか、下請けを切るとか、何らかの対策を打てるかもしれません。が、ベンチャー企業は簡単につぶれます。paiza(ギノ)も今のところ一応順調ですが、いつどうにかなってしまうか、わかったもんじゃありません。

これまでになかった新しいサービスを企画・制作・運営し、ビジネスとして軌道に乗せるのはかなり大変です。頑張って作ったのに思いのほかお金にならないとか、競合に似たようなサービスをリリースされてしまうこともありますし、軌道に乗らなかったサービスが終了…といったケースも珍しくはありません。やはり、着実に安定した企業で働きたい人には向かないでしょう。

大手企業の特徴

意思決定に時間がかかることが多い

大きな組織の中にいると、会議に時間をとられてしまう、たくさんの上司や部署の承認を得ないと仕事が進められない…などといったケースもよくあります。

ベンチャー企業の裏返しにはなりますが、意思決定のスピード感は、どうしても遅くなってしまいがちです。

スピード感のある仕事がしたくてベンチャーに転職したという人は多いです。ただ逆に、動くものを素早く作っていくようなやり方が合わないとか、じっくり決めてきっちりやるほうが好きな人もいますよね。

実際、よく考えずにベンチャー企業に転職したものの、前職での仕事の進め方がしみついてなかなか切り替えられずに悩んでしまう人もいます。自分にはどのような仕事の進め方が合っているか、転職前にしっかり考えたほうがよいでしょう。

分業が進んでいる

これもベンチャー企業の裏返しになりますが、大きな企業ほど分業が進んでいて、部署や職種ごとに業務範囲が細かくわかれている傾向にあります。

たとえば、ベンチャー企業だとサーバもフロントもデータベースもインフラやネットワーク周りも全部見ないといけないのが、大手企業だと部署やサービスごとにサーバサイドエンジニア、フロントエンドエンジニア、データベースエンジニアがいたり、インフラエンジニア、ネットワークエンジニアがいたり…と分業が進んでいる企業が珍しくありません。

教育・研修や会社の仕組み、福利厚生などが整っている

「教育や制度がしっかりしたところでないと不安…」という方もいるかと思いますが、大手であれば、そのあたりは受け入れ態勢も整っている場合が多いです。

不安がある人は、研修制度などについて、面接の段階で聞いておいたほうがよいでしょう。

また、すでに会社の仕組みや制度ができている、福利厚生が手厚いなどといった点は、大手企業ならではのメリットです。

新しいものを取り入れたり、仕組みを変えたりするのが大変かも

前述の通り、大きな企業だとすでに仕組みができあがっているケースが多いわけですが、逆にその仕組みを変えたり、新しいものを取り入れたりするのは大変…という側面もあります。

例えば新しいツールをひとつ取り入れたりするのにも、たくさんの上司の承認が必要だったり、何か不便があっても「全社的な制度で変えようがありません」と言われてしまうかもしれません。

何かを変えるのが大変…というのは大きな組織だと仕方のないことかもしれません。

有名サービスや大型のプロダクトなどに携われるかもしれない

ベンチャー企業で新しいサービスを立ち上げて、軌道に乗せるのはかなり大変です。

大手企業であれば、ある程度ユーザーがいる既存のサービスがあり、利益も生まれているはずですから、そこに乗っかれるというのはやはり大手のよいところだと思います。もちろん大手で新たなサービスを立ち上げる場合もありますが、それでもノウハウや運営元の知名度などは蓄積されたものがありますからね。

ユーザーが多いサービスですと、それだけ反応も大きなものとなりますから、それがやりがいにつながっている人も多いかと思います。

ときどき、自社開発サービスなら絶対的にユーザーと近くて反応がもらえるものだと思っている人がいますが、ベンチャー企業だと、作ったけどほとんど誰にも使ってもらえなかった…といったケースも珍しくありませんから、注意してください。

社内にロールモデルとなる先輩がいる

「このままここに勤めていたらこういうキャリアを積んでいくことになるだろう」というキャリアコースが用意されているのは、大手企業のよいところです。

ロールモデルとなる先輩もたくさんいるので、「ここに10年いたらこんなキャリアを経て、あの先輩のような感じになるのかな」というのは想像がしやすいですよね。(もちろん、そのキャリアが自分にとって望ましいものかどうかはまた別の話ですが)

ベンチャー企業ですと、そもそも社内にロールモデルがいないので、「自分のキャリアは自分で考える」必要があります。

明確にやりたい仕事やなりたいエンジニア像が見えている人ならよいのですが、ロールモデルがいないことで自分のキャリアについて悩んでしまう方も多く見受けられます。

まとめ

というわけで、ベンチャーと大手企業の違いや特徴についてのお話でした。

特に大きくわけて、自分が携わりたい業務範囲や、進め方のスピード感によって、向き・不向きがわかれると思います。

ただ、この話はあくまでよくある共通項であり、すべての大手企業やベンチャー企業が絶対に当てはまるわけではありません。自分に合う企業かどうかは、求人票などの情報を調べたり、気になることを面接で聞いたりした上で、見極めるのが重要です。


paiza転職では、IT/Webエンジニアの求人票を、開発ジャンルや使用言語、給与額などだけでなく、イヤホンOK、裁量労働、副業OK、一部在宅勤務可、原則定時退社、時短勤務可、スキル研修が充実…などなど、さまざまな条件で検索することができます。

paiza転職について詳しくはこちら
paiza転職





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック

コメントで意見交換もOK!無料でWebサイトのプロトタイプを作成・公開可能な「Draftium」を使ってみた!

f:id:paiza:20190130130110j:plain
どうも、まさとらん(@0310lan)です!

今回は、誰でも簡単に短時間でWebサイトのプロトタイプを作成・公開できる無料のWebサービスをご紹介します!

デザイン性の高いプロトタイプを構築できるのが魅力なうえ、コメント機能を活用することで公開したプロトタイプに不特定多数の人からさまざまな意見をもらうこともできるスグレモノです。

これからプロトタイプを作ろうと考えている人も含めて、ご興味ある方はぜひ参考にしてみてください!

Draftium

f:id:paiza:20190130125810j:plain

■「Draftium」の使い方

それでは、「Draftium」をどのように使っていけばいいのかを見ていきましょう!

まずは簡単なユーザー登録を済ませるために、トップページに配置されているボタンをクリックします。

f:id:paiza:20190130130240j:plain


ユーザー登録フォームが表示されるので、好きなユーザー名・メールアドレス・パスワードを入力しましょう。

f:id:paiza:20190130130256j:plain


すると、自分専用の「ダッシュボード」が表示されます!

f:id:paiza:20190130130317j:plain

この画面から、新規のプロジェクトを作成したりアカウントの管理などができるようになります。

■テンプレートから素早くプロトタイプを作ってみよう!

「Draftium」でプロトタイプを作る方法はいくつかあるのですが、まずは公式で提供されているテンプレートを使った作成方法を見ていきましょう!

「ダッシュボード」の画面右上にある「Create New」ボタンをクリックします。

f:id:paiza:20190130130348j:plain


すると、さまざまな用途別に用意されたテンプレートが一覧表示されます!

f:id:paiza:20190130130403j:plain

ポートフォリオ系、ショップ系、企業向け、イベント・告知系、マーケティング系など、幅広いジャンルから選択できます。


今回はIT企業向けのテンプレート「IT Services」を選択してみます。

f:id:paiza:20190130130422j:plain

マウスカーソルを重ねるとボタンが表示されるので、「Start editing」ボタンをクリックしてください。


テンプレートを自由にカスタマイズできる「編集エディタ」が起動します!

f:id:paiza:20190130130439j:plain

このエディタ上で自分のイメージ通りにWebコンテンツを編集していくわけです。


基本的には、テンプレートのテキストを編集していくのが簡単でしょう。

f:id:paiza:20190130130455j:plain


また、画面上の「+」アイコンをクリックしてみてください。

f:id:paiza:20190130130513j:plain


するとブロック単位にカテゴライズされたWebコンテンツの一覧が表示されます!

f:id:paiza:20190130130533j:plain

ギャラリー、FAQ、価格表、チーム・会社紹介、ブログ、SNS、About…など、すぐに利用できる膨大な数のコンテンツを選択するだけで簡単に取り込めます。


テンプレートに最初から配置されているコンテンツは、設定メニューから非表示にしたり削除することもできます。

f:id:paiza:20190130130551j:plain


ある程度、編集ができたら画面上部にある「Preview」ボタンをクリックしましょう。

f:id:paiza:20190130130610j:plain


すると、スマホ・タブレット・PCでのプレビューを表示することができます!

f:id:paiza:20190130130632j:plain

このように、テンプレートを活用してコンテンツを自由に編集していくことで簡単にWebサイトのプロトタイプを構築することができます。(ゼロから自分で構築することもできます…)

■Webコンテンツをカスタマイズしてみよう!

「Draftium」にはWebコンテンツを細かくカスタマイズできる機能も多く搭載されているので、いくつか便利な機能をピックアップしてご紹介しておきます!

例えば、コンテンツのクオリティを高めたい場合に高画質なフリー画像を配置できる機能があります。

設定メニューから「Background」タブの「Gallery」ボタンをクリックします!

f:id:paiza:20190130130715j:plain


「Free photos」タブを見ると大量の画像が表示されるので、任意の画像をクリックしてみてください。

f:id:paiza:20190130130730j:plain

検索ボックスから好きなキーワードで検索することも可能です。


選択した画像が表示されるので、問題なければ「Apply image」ボタンをクリックします。

f:id:paiza:20190130130758j:plain


すると、こんな感じのコンテンツが…

f:id:paiza:20190130130814j:plain


画像を背景にしたコンテンツに変化します!

f:id:paiza:20190130130828j:plain

もちろん、自分で用意した画像を配置することもできます。


また、設定メニューから「Animation」タブを開くと、コンテンツへ自動的にアニメーション効果を付与することもできます。

f:id:paiza:20190130130925j:plain

フェードイン、ズームイン…など、いくつかの効果とスピードの調整などをすれば、ダイナミックな表現も可能です。(パララックス効果も可)


さらに、マップなどインタラクティブなコンテンツの場合は専用のエディタを利用して編集できます。

f:id:paiza:20190130130955j:plain

場所の名称や住所などを入力するだけで、簡単にマッピングを行うことができるようになっています。(複数登録も可能)


マップは画面いっぱいに表示することができます!

f:id:paiza:20190130131008j:plain


複数のページから構成されるWebページを作ることも可能で、画面上部のメニューから新規ページを追加できます。

f:id:paiza:20190130131023j:plain


追加したページの名称や公開する時のURLを自分で設定することも可能です。

f:id:paiza:20190130131051j:plain


追加したページをクリックしてみましょう!

f:id:paiza:20190130131104j:plain


すると、ヘッダー・フッターだけで中身の無い新規ページが表示されました。

f:id:paiza:20190130131119j:plain

あとは、自由にコンテンツを追加・編集して新規ページを作成していけばいいわけです。


また、新規ページをリンクさせたい場合はナビゲーションを選択します。

f:id:paiza:20190130131148j:plain


リンクさせたいタブを選択して、先ほど作成した新規ページをクリックすれば完了です!

f:id:paiza:20190130131204j:plain

これで、公開した時にナビゲーションタブをクリックすると指定したページに画面遷移するようになります。

このように、簡易的なプロトタイプだけでなく細かく作り込んだWebサイトも構築できるので用途に合わせて使い分けるといいでしょう。

■コメント機能を活用してプロトタイプを公開しよう!

「Draftium」には作成したプロトタイプをネット上に公開できる機能が用意されています。

方法は簡単で画面右上にある「Publish」ボタンをクリックするだけです!

f:id:paiza:20190130131239j:plain


すると、公開用のリンクが生成されるので「Open」ボタンをクリックするとブラウザで表示することができます。

f:id:paiza:20190130131302j:plain

また、このリンクをSNSやメールなどでシェアすれば、誰でも閲覧することができるわけです。


さらに面白い機能として公開したプロトタイプに「コメント機能」を組み込むリンクを生成することができます!

f:id:paiza:20190130131317j:plain


このリンクをシェアすることで、ブラウザに表示されたWebサイトに「コメントボタン」が配置されます。

f:id:paiza:20190130131333j:plain


このボタンをクリックすると「コメントエディタ」が起動します!

f:id:paiza:20190130131403j:plain

画面左側にWebサイトが表示されて、右側にコメントの入力や表示ができるようになります。


Webサイトの部分をどこでもいいのでクリックするとマーキングが可能で、そのポイントに対して自由にコメントを投稿できるようになるわけです。

f:id:paiza:20190130131421j:plain

これにより、不特定多数の人からさまざまな意見を収集することができるので便利です。


また、エディタの画面に戻って上部にある「コメント」アイコンをクリックします。

f:id:paiza:20190130131439j:plain


ここで投稿されたコメントをすべて確認したり、返信を投稿することも可能です!

f:id:paiza:20190130131501j:plain

このコメント機能を活用することで、プロトタイプをどんどん改善していくことができるわけです。

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、誰でも簡単にコメント機能付きのプロトタイプを作成できるWebサービスをご紹介しました!

とにかく扱いやすい操作感と良質なコンテンツを短時間で作れるのが魅力で、自分のイメージに近いプロトタイプを作ってチーム内でシェアするには最適なサービスだと感じました。

またブラッシュアップするために、さまざまな人から意見をもらうことも可能なため時間の効率化にも繋がるでしょう。

ぜひ、みなさんもオリジナルのWebサイトを構築してシェアしてみてはいかがでしょうか。


<参考>



 

paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud