編集部員(プログラマー)プログラミング未経験ウェブデザイナーがフロントエンドエンジニアを目指すための4ステップツイートシェアはてブLINEPocketかつてDTPデザイナーを目指していたわたしは、新卒入社の会社でウェブの部署に配属され、デザインをやっていたつもりが気づいたら半分フロントエンドエンジニアに足をつっこんでいました。そんなわたしが見る今のウェブ業界や、ウェブデザイナーがするべき今後のスキルアップについてお話します。Text質問はteratailで技術を外に発信しよう自分のコードを保存・公開できるGitHubウェブブラウザ上で編集とプレビューができるCodePenさらにステップアップするためにはUI・UXデザインの考え方を学ぶブランディングを身につけるアプリ開発も視野に入れてみるさいごにどうして今フロントエンドエンジニアを目指すのか無料サービスが素敵なデザインを用意してしまっている近年、無料でホームページを作れるサービスは多くあり、そのサービス内容も充実しています。WordPressは言わずと知れた世界的にも有名なブログソフトウェアです。その認知度のおかげでカスタマイズ性は高く、無料テーマの種類もとても豊富です。Wix(ウィックス)やJimdo(ジンドゥー)は小規模のウェブサイトをつくるのに適しています。写真を大きく使った大胆なデザインや、最低限の装飾のみで見やすく読みやすいミニマルデザインなどトレンドのデザインも網羅しています。ポートフォリオ※1にはTumblr(タンブラー)、ランディングページ※2にはペライチ、ネットショップサイトにはBASE(ベース)といった具合に、それぞれの特徴に合わせた最適なサービスが用意されています。ランディングページひとつの商品やサービスについて説明するための単一のページ今やデザインセンスを持ち合わせていなくても、おしゃれで見やすいホームページを無料で作れてしまう時代なのです。ホームページが重要視されなくなってくる上で書いたように、誰でも簡単に作れるようになったホームページですが、今後は自社サイトの重要性が低くなってくるのではないかと言われています。あなたは友だちと飲み会をするお店を決めるときどのように探していますか?食べログやホットペッパーを利用し、メニューや口コミを見ているのではないでしょうか。旅行先で宿泊するホテルを探すときはどうでしょうか?じゃらんやBooking.comなどで料金やサービスを比較してはいませんか。このように独自のホームページは衰退していき、まとめサイトのような形で情報発信されていくのが主流になっていくことが予想されています。生まれた頃からITと過ごしている世代がやってくる実はわたしが最も恐れていることがこちらです。あと数年もすると、生まれた頃からスマートフォンとお友だちだった世代が、会社に新人として入ってきてもおかしくありません。デジタルネイティブと呼ばれたわたしですら、彼らの柔軟性は未知数です。2020年からはとうとうプログラミング教育が小学校で必修化となります。子どもたちのフレッシュな好奇心とスポンジのような吸収力でプログラミングを学ぶとどうなってしまうのか。現代社会では収入のために、必ずしも会社へ行って働かなければいけないわけではありません。YouTubeの動画投稿やライブ配信アプリによって収益を得ることができます。そのような感覚で、社会に出る前から子どもたちはプログラミング技術をいかようにも売り物にできてしまうわけです。そんな世の中で、デザイン一本だけでやっていけるでしょうか。今のうちからプログラミングを始めることをおすすめしているわけなのです。次からは、実際にフロントエンドエンジニアを目指すためのステップを紹介していきます。段階的に、またはプロジェクト全体でかかわる多くの職種があります詳しく書き出すともっと多くの職種がありますが、簡単にまとめると下の6つに分けられます。覚えられないほどの職種があるように思いますが、ひとりがひとつの職種に専念していることは稀です。大企業で部署がしっかりと整っているようなところでない限り、いくつかの職種を兼任している人ばかりなのではないでしょうか。それほど各職種同士のかかわり合いが強く、ウェブに関する知識は広いほど仕事を進める際に役立つことが分かります。ウェブデザイナーはどんな仕事をしているの?その名の通り、ウェブのデザインをします。Photoshopなどを使ったデザインに取りかかれるわけではありません。手書きでラフスケッチを書いていきます。人によってはこの工程を飛ばして次のワイヤーフレーム作成から始めることもありますが、どうもわたしは手書きをしないと頭の中整理できないマンなので必ずラフスケッチを行います。デザイナーというとセンスや感覚の生き物と思われがちですが、実はどんなデザインをするにも理由や裏付けが必要で、理論的にデザインを説明できなければなりません。「ただかっこいいと思ったから」ではお客様を納得させられるデザインは作れないのです。情報を書き出し、整理し、理論的に構築し直すことは、わたしにとって良いデザインのために必要な手順となっています。次にラフスケッチを元に、コンテンツのレイアウトやページ移動を明確にするためにワイヤーフレームというものを作ります。この時点では写真の代わりに灰色の四角を置き、文章もダミーのものを入れておくことが多いです。ワイヤーフレームで全体の方向性や画面遷移をお客様も含めたチーム全体で共有し、ウェブサイトとしてのゴールにズレがないように意識を合わせます。してやっとデザインを作り込む段階へと進むことができます。企画から参加しウェブサイトの目指すゴールを共有できていたり、フロントエンドの作業効率を考えたデザインを提案できると、他の職種との連携がスムーズにいきます。Animateフロントエンドエンジニアはどんな仕事をしているの?HTMLとCSS、Javascript、時にはPHPという言語を使用してウェブサイトを構築します。構築もフロントエンドエンジニアにとって大きな作業ではありますが、最も大変な作業は検証ではないでしょうか。新しいデバイスが出たり、ブラウザのバージョンアップがあったり、その度に表示の崩れやバグに悩まされるのはエンジニアあるあるです。いった不測の自体に対処するのもフロントエンドエンジニアの腕の見せどころです。ウェブに関連する技術は日々変わっていくので、情報収集は欠かせません。最新情報を取り込み、営業へ「こういう技術があるので、これを利用して問題解決ができそうなお客様がいたら提案していきましょう」と自ら発信までできると、優秀なフロントエンドエンジニアとして頼りにされるでしょう。※プログラミング言語は英語で書かれることと最新の情報や発表は英語のことが多いためウェブデザイナーがプログラムを書けるメリット・デメリットメリットデザインとプログラムで作業する人が違うと、認識合わせや質問と回答の繰り返しで時間を使ってしまいます。その点ウェブデザイナーがフロントエンドエンジニアを兼任していると、仕様の変更などがあっても複数人で対応しているよりは簡単に対応することができます。実作業で感じるメリットは、デザインの段階からコーディングの手順をイメージできることです。複数の似たようなパーツが必要なときに、どのような共通点を持たせればコーディングが楽になるかを考えながらデザインできるのは非常に効率的です。友人は転職の際に、デザインとプログラミングをできることは転職活動時の大きな強みになったとも話していました。デメリット会社員として感じるデメリットは、自分の仕事の範囲を決めにくいことです。できてしまうがゆえに、他の部署がやるべき仕事もまとめて任されてしまうことがあり、本来の仕事に手を付けられなくなったり残業が増えてしまうことがあります。これは会社の分業として感じる悪い点なので、フリーランスになるのであれば色んな技術が身につくことは逆にメリットとなるでしょう。学習と実践で身につけていく「Progate」Progateは自分でプログラミングのための環境を用意しなくても、オンライン上でコードを書きながら学習できるサービスです。基礎的な内容は無料で学ぶことができ、実践的なレッスンは有料会員になると受けることができます。Progate自体のホームページも大変きれいで、アイコンやキャラクターなどが可愛らしくそれだけで気分が上がります。レッスンには学ぶ回と実際にやってみる回があり、ゲーム感覚で進めることができます。動画を観ながら実践する「paizaラーニング」paizaラーニングは動画を観ながらコードを書いて学びます。こちらもプログラミングのための環境は構築不要で、オンライン上でコードを打つことができます。動画は1本約3分と毎日続けやすい長さとなっています。学びながら手を動かす勉強法が人気のポイントです。講座は一部無料のものや完全無料のものもあるので、視聴してレッスンの雰囲気をつかむことができます。特徴はなんと言っても、スキルによって書類選考なく書いたコードで面接まで行ける採用を行っている点です。プログラミングをするツールは自分でインストールしなければなりませんが、その手順も分かりやすく載せてくれています。真似をしながら学習することをコンセプトとしています。無料で会員登録などせず始められるので、最初の一歩としてハードルが低いのはありがたいですね。小学生の頃、ホームページ作成に興味を持ったわたしはメモ帳ソフトでひたすらコードを書き続けていました。そんな原始時代から早20年弱、今や会社ではDreamweaverをバッチバチに使いこなすほどにまで成長しました。Adobe製品を個人で購入するのはハードルが高いため、まずは無料のものから始めたい方も多いはず。そんな方におすすめの無料で使えるテキストエディタ、その中でも、MacとWindowsどちらでもダウンロード可能なものをご紹介します。Codeは、2015年11月にMicrosoft社が正式に公開したテキストエディタです。Dreamweaver同様、HTMLやCSSのコードは頭文字を入力するとそれに続くコードの選択肢を出してくれます。ダウンロードの初期段階ではメニューなどが英語になっていますが、簡単に日本語の拡張言語パックをインストールすることができます。BracketsBracketsはAdobe社が無料で提供しているテキストエディタです。2017以降、コードエディター部分にBracketsをベースにしたものが採用されています。そのため、Dreamweaverで使えるような機能が満載です。html編集中に該当のcssをその場で変更できるクイック編集機能や、テキストを複数選択し一度に修正できるマルチセレクト、そして修正した内容がすぐにブラウザに反映されるライブビューもワンクリックで行えるという高性能っぷりです。初期状態で日本語対応となっているため、ダウンロードしてきたらすぐに使い始めることができます。Textは有料ソフトですが、ライセンスなしでダウンロードが可能で、ときおりポップアップで有料版のお知らせが出てきますが無料で使い続けることができます。こちらも日本語化は可能ですが、少し手順が複雑です。複数行を一度に編集できる機能やオプション次第でより自分好みに、より便利にカスタマイズできる部分などがエンジニアからも人気を集めるテキストエディタです。質問はteratailでひとりでコーディングをしているとつまづくことが必ずあります。インターネットに情報はごまんとありますが、最初の頃は自分の知りたいことの検索も上手にできないかもしれません。そんなとき手助けしてくれるのがteratailというプログラミングに特化したQ&Aサイトです。回答率が90%以上と高く過去のQ&Aも豊富なので、類似の質問を検索することで回答を得られることもあるでしょう。今度はあなたが技術を発信する立場になりましょう自分のコードを保存・公開できるGitHubGitHubとはGitというバージョン管理の機能を使用した、コードを保存・公開できるサービスです。スライダーやアコーディオンメニューなどウェブサイトのパーツでJavascriptを使ったコードなどは、一昔前はzipでアップロードされているものをダウンロードする場合がほとんどでした。最近は開発者がGitHubにコードを公開しているため、そこでコードの中身を見たりバージョンアップの履歴を追うことができます。GitHubは無料で利用することができるので、上で書いたような開発者だけでなく、自分の勉強用やよく使うコードの保管用に利用している人も多数います。世界中に公開されることを恐れずに、あくまで自分用に使いながらついでに誰かに見てもらえるかもしれないという心持ちで始めるといいかもしれません。ウェブブラウザ上で編集とプレビューができるCodePenCodePenとは、ウェブブラウザ上でHTML、CSS、Javascriptのコーディングができリアルタイムでプレビューまでできるサービスです。コードの共有・公開もでき、さらにはWordpressなどの記事にコードとプレビューが一体になった画面を埋め込むことができます。技術ブログを持っていれば、ただコードを挿入するだけよりもその場で結果までを見せることができるCodePenを使うことをおすすめします。情報を発信していくうちに、見た人からの反応があれば万々歳です。間違いの指摘があれば直すことができますし、誰かの役に立てればこれほどうれしいことはありません。ひとりでは気づけなかったことを見つけられることは、外に技術をお披露目することで得られる最大の利点です。将来のことを考えて、他にも身につけたほうがよいスキルはありますか?経験者あなただからできる仕事にするために、付加価値をたくさん身につけてくださいここまでプログラミング未経験者がフロントエンドエンジニアになるためのステップを書いてきました。デザイナーにしろフロントエンドエンジニアにしろ、仕事がただの流れ作業になってしまってはせっかく身につけた技術も活かしきれません。「言われたことをやる」だけでは、世界にあふれる便利なサービスたちに置き換えられていきます。あなただからできる仕事を目指してよりステップアップするために、まだまだ学んでおきたいスキルや考え方がたくさんあります。参考にしてみてください。すべてを一度に身につける必要はありません。興味のあるものや、今かかわっている仕事に役に立ちそうなものから一歩ずつ進んでいきましょう。Interface(ユーザーインターフェース)」の略で、ユーザーと製品・サービスをつなぐ部分を指します。ユーザーが製品・サービスを使う際の動作に問題や悩むことがないようにデザインをする考え方で、簡単に言うと「使いやすい」「見やすい」を形にします。Experience(ユーザーエクスペリエンス)」の略で、ユーザーが製品・サービスを使うときの体験をより良いものにします。UIはUXという大きい概念の中のひとつの考え方です。ウェブデザインの場合は、情報が整理され見やすいレイアウトやクリックできると分かりやすいボタンなどがUIの考え方で、スクロールやカーソルの動きと連動したコンテンツの見せ方で情報の発信だけではない楽しさを提供することなどがUXの考え方と言えます。ブランディングを身につけるブランディングとは企業のマーケティング戦略のひとつで、企業とユーザーが製品・サービスや会社自体に対して抱くイメージを同じにしていくための活動です。会社のホームページをつくる、サービスを考える、PRをするなどの際に、共通の意識を根底に置いて考えることでブランド力を高め、ユーザーにブランドとしての価値やメッセージを伝えることができます。企画の段階から参加できるのであれば、ホームページのことだけではなく、その会社が目指す方向性を一緒に考えブランディングし、それを成果物に反映することができると素晴らしい仕事となるでしょう。アプリ開発も視野に入れてみる日常生活でも肌で感じるのは、いろいろなサービスがアプリに変わっていっていることです。ウェブサービスも残したままアプリ版が出ているものも多いですが、10代の若者はアプリ版しか知らない・使っていないという話もよく聞きます。今のうちに「Java」「Ruby」「Swift」などの言語に馴染んでおくことは、今後のウェブ業界を生き抜くうえで必ず役に立ちます。さいごにウェブ業界について少しこわい未来も書きましたが、そんな将来に対して漠然と不安を持って過ごすよりは、今できることを始めてみるだけで気分も変わってくると思います。学ばなければならないことがあって逆に不安になりましたか?大丈夫です。そんな不安を乗り越えてここまで読んだあなたなら、きっと一歩を踏み出せることでしょう。わたしもまだまだ知らないことや覚えたいことでいっぱいです。一緒にステップアップしていきましょうね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。~両方経験した私から言えること~SES営業のトラブル対応RECOMMENDこちらの記事も人気です。編集部員(プログラマー)現役プログラマーの編集部員です。このブログは複数の編集部員によって運営されています。おすすめの勉強法は?未経験からプログラマーに就職2020.2.18『今』プログラミング学習をおすすめする3つの理由JavaScript2020.2.11【初心者向け】TypeScriptって何?JavaScriptと何が違うの?職業訓練校2020.2.9未経験者が職業訓練でJAVAを学ぶプロフィールごま塩シンジ(編集長)30代後半、未経験からweb系企業に就職しました。底辺高校→Fランク大学→営業→PHPエンジニア→フリーランス※当サイトはリンクフリーです※当サイトは複数のプログラマーによって運営されています※広告募集中です。ご希望の方はお問い合わせからご連絡ください。Java有償化とは?無償で利用できない?いや、できます。最近のコメント初心者におすすめのプログラミング言語は何か。初心者におすすめのプログラミング言語は何か。初心者におすすめのプログラミング言語は何か。