Webデザイン

Chromeの新しいタブを開くだけでエディタに！「Web Maker」で作業効率が上がる！

オフラインでもブラウザ上で使えるエディタ「Web Maker」のご紹介です。Chrome拡張機能を追加した状態で新しいタブを開くと、エディタとブラウザが一度に表示され、すぐその場でコードの動作確認を行うことができるツールです。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

「Web Maker」を使えば、わざわざエディタとブラウザ両方を開かなくて済みそうです。

拡張機能を追加した状態で、Google Chromeで新しいタブを開くとエディタ&ブラウザが表示されます。つまり、ブラウザ上でコードを書き、その場で実行されるというものです。

しかもオフライン状態で使えるという優れもの！

エディタとGoogle Chromeを行ったり来たりすることも必要なくなるでしょう。

スクリーンショット 2016-05-12 16.12.07

HTML/CSS/JavaScriptのコードを記述すると、即座にブラウザに反映されます。

一つの画面でコーディングと動作確認が行えるので、作業が効率的になること間違いないでしょう。

JavaScriptも書いて確認してみます。

スクリーンショット 2016-05-12 16.12.20

3秒後に「Hello World」というアラートが出るように記述しています。

スクリーンショット 2016-05-12 16.12.38

その場で反応が返ってきました。

ちょっとした記述の動作確認をするには大変便利なツールになると思います。

また、本やサイトで書かれているソースコードを写経する際も簡単に行えるでしょう。

現在ある他の機能としては、HTMLファイルでダウンロードできる機能とCodepenで書いたソースコードをそのまま共有できる機能があります。

書いたその場で実行できるサービスとしては、CodepenやjsFiddleがすでにありますが、Web Makerはオフラインでも利用できるので環境に関係なく利用することができます。

新しいタブを開くたびにエディタの画面になるので、少し違和感はありますが何もせず入力し始めれば普通にGoogle検索できるので使い勝手は変わらないでしょう。

まだ機能自体少なく、現在実装中だそうですが、簡単な作業が効率化されるはずです。実行テストツールとしてぜひ利用してみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分でWebサイトを制作してみたい場合はご参加ください。

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

事例から学ぶ！HubSpotがサイト改善に成功したUX戦略とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UXPinのコンテンツ・ストラテジストであるJerry Cao氏によって...

Webデザイン

HTMLでCache-Controlを使用する方法を現役エンジニアが解説【初心者向け】

HTMLでCache-Controlを使用する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

ヒーローイメージで印象を大きく変える10のデザイン事例

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UI/UXデザイナーのNick Babi...

Webデザイン

CSSで"cursor: pointer"が効かない原因と対処方法を現役エンジニアが解説【初心者向け】

CSSで”cursor: pointer”が効かない原因と対処方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向け...

CSS

今すぐ使える！CSSフレームワークのCompassとは【初心者向け】

CSSを効率的に書くためのフレームワークである、Compassについて解説しています。 Compassを使用するためにはSassの知識、開発環境が必要とな...

CSS

【初心者必見！】Webデザイナーが持っておくべき「ポートフォリオ」とは

Webデザイナーとして就職・転職する上で欠かせないのがポートフォリオ。この記事では、事例も紹介しながらポートフォリオとは一体なんなのか分かりやすく解説し...

Webデザイン

あわせてよく読まれている記事

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、WebデザイナーであるChristian Krammer氏によって投稿されました。 UIデザインツールはこれまでにおいてかなりの人気を集めてきました。Affinity Designerや、Gravit、Sketch等の素晴らしいアプリケーションが大きく進化した一方でAdobe XD （Adobe Experience Designの略）やFigma のようなプレイヤーもこのフィールドに参入してきました。個人的には後者に最も魅力を感じます。Sketchとの類似性から、Figmaも最初の段階から簡単に正しく理解できました。更にFigmaは簡単なファイルの共有やvector networks、「constraints」(レスポンシブデザイン向け）、リアルタイムコラボレーションのような他の使い易い競合相手とは明確に違う独自の個性があります。この記事ではSketchとFigma 両方のアプリケーションを細部に渡り比較し、それぞれの長所がどのような点かに焦点を当てていきます。 Sketchの最大の弱点は常にAppleのエコシステムにロックインされている事です。設計するだけではなく、ファイルを開きチェックするのにもMacが必要です。WindowsやLinux上では全く機能しません。その為しばらく経つとSketchファイルのスペックを持つ有料のサービスが現れた訳ですが、それにしても厄介で余分な手順です。上：Sketch 下：Figma これが恐らくFigmaが最初の段階から一線を画す理由の1つです。すなわち、世界中基本的にどのデバイスでもFigmaはWebブラウザで使うことができます。どのインストールも一切不要です。ただChrome（又はFirefox）を開いてアカウントを作成して設計を開始するだけでいいのです。私は以前からずっとブラウザベースのツールを躊躇していましたが、Figmaは一瞬で私の懸念を仏拭しました。Figmaは多数の要素を含みながらもSketchと同様高性能です（もし同様でなければFigmaの方がより高性能です）。 WindowsやMac用のFigmaのスタンドアローンデスクトップアプリも入手可能ですが、基本的にそれらはただのブラウザバージョンのラッパーにすぎません。それらはキーボードショートカットにより優れた一方で、常にオンライン上にいなければなりません。勝者：Figma 理由：プラットフォームに依存しないためユーザビリティ（特徴的機能とユーザーインターフェース）基本的に、FigmaはSketchのインブラウザ版と呼ぶのが最も相応しいでしょう。機能はほぼ同じ、インターフェースも似ている、キーボードショートカットでさえもほぼSketchから受け継いでいる。もし既にSketchを知っていれば、Figmaが2016年の始めにリリースされた時にすぐに簡単に使いこなせるようになったでしょう。 Figmaはリリース当初から様々な点において改善され、いくつかの部分ではSketchを上回ってきました。しかし、プラグインやサードパーティ・ツールとの統合、リアルデータを利用できる機能（Craft Pluginも使用して）など、欠けている機能が未だにいくつかあります。それにも関わらず、この調子で改善が進むとFigmaがSketchに肩を並べるのはもはや時間の問題でしょう。勝者：引き分け理由：現時点では大差はありません。しかしSketchの方があなたの仕事を効率化させる要素を持ち合わせています。価格 Sketchは元々新しいバージョーンごとに約99USドルの初回手数料のみで発売されました。しかしやがてこのビジネスモデルは維持不可能だと判明されます。Bohemian Coding社は最近価格を定期購入が必要なモデルに変更しました。99USドルで1年間の無料アップデートが入手できます。その後はそのまま使い続けることができるか、更に同額を支払うことでまた別の1年アップデートが行えます。この値上がりは当初不適切なように見受けられましたが、デザイナーとしてあなたのメインツールへの99ドルの価値とは何でしょうか？そうです、大した額ではありません。 Adobe’s Creative Cloud の定期購入よりはまだ安いのです。（又、Sketchは何の問題もなく使い続けることができる一方、Creative Cloud の定期購入を辞めたらどのAdobe CC アプリも使い続けることができなくなります。）当分の間は、Figmaは全ての人が無料で使えるようになっていますが、今年後半には変わってくるでしょう。きっと定期購入制になり、月額10~15USドルになるでしょう（あくまで私個人の見解ですが）。確かな事は1つあります。それは、Figmaは学生に対して常に無料でしょう。（Sketchが教師と学生に対しリーズナブルなディスカウントを提供しているのと似ています。）勝者：引き分け理由：Figmaの価格に関する発表はまだない為 [PR] Webデザインで副業する学習方法を動画で公開中コラボレーション機能 Figmaの主な差別化要因は恐らく「マルチプレイヤー」と呼ばれるリアルタイムコラボレーション機能でしょう。その機能を使って他のユーザーと同時に1つのファイルを編集することができるだけでなく、他のユーザーがデザインをいじっているのを見たり、内蔵型のコメント機能を使って変更を知らせることができます。 1つの例として、この同時編集はプレゼンテーションやリモートチームにとって素晴らしく、また関わっている全てユーザーが同じ状態を確認し、意図していなかった上書きを防ぐことができます。 Sketchには（プラグインを使用してですら）そのようなコラボレーション機能はありませんし、多分そのような機能がない方がSketchにとってはよいのかもしれません。なぜなら「このボタンをもっと大きくしよう。ちょっと待てよ、勝手にやっちゃえ！」というような結末をもたらすかもしれないからです。もちろんこれは少し大げさな例です。この機能は多少価値はありますが、事前に特定のルールを決めておかないとリスクがあります。勝者：Figma 理由：同時に同じファイルを複数の人で共同編集できる為ファイル共有とスペックリアルタイムコラボレーション機能に幾らか関連しているのは設計ファイルの共有です。なぜならFigmaではすべての事がブラウザで行われるため、全てのファイルが必然的にURLを持っていて、それを同僚や上司に送ることができます（閲覧専用モードでも可能です）。このブラウザベースのアプローチの別の大きな利点は、開発者をはじめ全ての人がサードパーティツールの必要性なしにすぐにデザインを開き検証できることです。 Figmaでは簡単に他のユーザーとデザインを共有できます。これはまさに、1つのファイルにおいて必要不可欠な全ての情報（例えばフォントサイズや色、寸法、アセットなど）を他の共同制作者に提供するためにSketchに求められているものです。しかしながら、前にも述べたように、ここであなたを手助けするZeplinやSimpli、InVisionの Inspect、Avocode、Marklyなどの有料のツールが必要です。公平な立場からみて、最初の3つは1つのプロジェクトでは無料ですが、より複雑なものに取り組む際にはそれだけでは十分ではないでしょう。更に何らかのツールを必要としている場合や、そのような（正直なところ基本的な）機能にお金をかけたくないというのであれば、MarketchやSketch Measureという無料のプラグインもあります。多くの有料のアプリではコメントを追加したり自動的にスタイルガイドを作成することができます。あるいは、FigmaはSketchのファイルフォーマットをサポートしているので、SketchのファイルをFigmaにインポートしてチェックすることさえできます。左上から右下順に:Avocode、Zeplin、Simpli、Markly。これら全てにおいて様々な方法でSketchのデザインの閲覧、共有可能。もし共同編集者とデザインをちょっと見たいだけであれば、内蔵されているSketch Cloudが正にその役割を果たしてくれます。iOSデバイスでデザインを見るには、Sketch MirrorやFigma Mirrorを使って、Androidのデバイスであれば、MiraやCrystalを使用することができます。 FigmaはAndroidベースのアプリを提供しないのですが、（デスクトップコンピューター上で）フレームかコンポーネントを選択後、デバイス上で「www.figma.com/mobile-app」を開くと、1種のプレビューが見れるでしょう。勝者：Figma 理由：サードパーティツールの必要性なしにブラウザ上で簡単にファイルの共有が可能な為コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ

アプリデザイン

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。昔のデモディスクを覚えていますか？機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。ワイヤーフレーム＆モックアップ VS. プロトタイプデザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。いつプロトタイプが必要になるのか？何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。 [PR] Webデザインで副業する学習方法を動画で公開中4種類のプロトタイププロトタイピングを始める前に、どの種類を使うか決めます。ほとんどのデザイナーたちが実践しているように、どのようなプロジェクトでも複数の種類を組み合わせて使うことができます。 1. 概念的プロトタイプこのプロトタイプは、形の上では完成した製品と全く似ていません。ここでインターフェースのディテールとレイアウトは重要ではありません。インタラクションとプロセスだけに集中します。全てのプロトタイプの目的は製品の動作性を示すことです。その意味で、このプロトタイピングは原始的な形だといえます。機能性だけがテーマであり、形は問題となりません。この段階では、フローチャート、ポストイットのメモ、PowerPointのプレゼンテーション、アイコンでプロセスを説明するビデオを使ったり、身振り手振りを加えてカメラに向かって録音してもいいでしょう。要点を伝えることができれば何でもいいのです。概念的プロトタイプはプロジェクトの初期段階で使われます。プロジェクトにはまだ名前がないかもしれません。アプリやWebサイトもアイデアの段階なので、「こんな感じで作動すると思う。」と話しているかもしれません。 2. ローファイプロトタイプローファイプロトタイプでは、レイアウトやスクリーンのサイズなど具体的な対象を扱うようになります。このプロトタイプは、作られるのも破棄されるのもサイクルが速いです。ローファイプロトタイプの目的は、あなたとクライアントが基本的な部分に満足できるまで、試行錯誤を最速で繰り返すためのものです。だからプロトタイプに愛着を持つべきではありません。ほとんどのプロトタイプは使い捨てであり、それこそが長所です。「ローファイプロトタイプ」は「ワイヤーフレーム」とよく置き換えることができます。この段階では紙に書いて行うこともよくあります。アプリでローファイプロトタイプを作成するときには、他のスクリーンへのリンクやコメントの機能など、基本的なプロトタイピングの機能を備えているものを使うことがおすすめです。ワイヤーフレームのアプリはインターネットとの連携が容易であるというメリットがありますが、やや動きが遅いことも多いです。概念的プロトタイプと同じくプロジェクトの初期段階で使われますが、ビジネスモデルやプロジェクト名はすでに存在している段階でしょう。上手くいくと確信できるものが持てるまで、頭の中で思いつく無数のアイデアをえり分ける時です。 3. ミディアムファイプロトタイプ段階によっては、ローファイプロトタイプでは要点を把握しにくい一方、ハイファイプロトタイプでは十分過ぎることがあります。スタイルガイドを完全には作成していなかったり、まだグラフィカルアセットを全て作り終えていない段階です。ミディアムファイプロトタイプは、このようなデザインの初期～中間の段階で使うことができます。インタラクションのシミュレーション機能を持つプロトタイピング作成アプリによって作られることも多いです。CSSのフレームワークを利用して、HTMLとCSSによって構築することもできます。 BootstrapとFoundationが、現在存在しているプロトタイピングのツールの中ではおそらく主流です。有名ブランドのイメージがあればそれを使うべきですが、ストックイメージでも足りるでしょう。ストックタイプのUIエレメントは、模作のインターフェイスをより速く構築するために使われます。プロトタイピング作成アプリの多くは、これらのUIエレメントのライブラリを持つことが多く、作業の高速化に役立ちます。ミディアムファイプロトタイプは、リテラル思考型(Literal thinker:全体的なイメージよりも、具体的なステップや言葉の定義から考えるような人)で外観や動作の近似を見たいと思うような人に向いています。彼らにとっては、「未完成」のヘッダーの方が、Webサイトのヘッダーに全く見えないようなスケッチ風の代物よりも、まだ耐えられます。リテラル思考のクライアントには、ワイヤーフレームで素早く考えた初期のアイデアを見せる必要はないでしょう。ミディアムファイプロトタイプの段階で見せる方が、彼らに方向性を分かってもらいやすいです。 4. ハイファイプロトタイプこの段階までプロジェクトが進むと、全てのスクリーンのモックアップが完成していて、全てが立派なものになっているでしょう。製品をバックエンドのコードと統合して、人々に製品の動作性を見てもらう時です。ハイファイプロトタイプは通常、デザインに関する最終的な合意をクライアントと結ぶために使われます。ただのPSDファイルを送るだけれはなく、インタラクティブなものを提示しなければなりません。 2つの方法のうちいずれかによって行われます。1つの方法では、静的なHTMLとCSSを利用して、一部をインタラクティブな外観に仕上げます。もう1つの方法では、画像やPSDのファイル形式をインポートできるアプリを利用して、擬似インタラクティブな特性を加えることで完成品のアプリ（製品）の機能を模倣します。アプリによっては、プロトタイプのデモをWeb上(またはモバイルデバイス上)で行うことも可能です。プロトタイピングのメソッドプロトタイプの主な種類を見たところで、次にプロトタイプを実際に作るためのツールをご紹介します。基本的な使い方も含めてすでにほとんどご紹介していますが、さらに詳細を見てみましょう。あなた自身とクライアント双方にとって適合するメソッドを選びましょう。ビデオまたはプレゼンテーションのプロトタイプこれらは具体的な作業がなされる前に、アイデアを売るためによく使われます。そのため通常は、潜在的な投資家を意識したものです。クライアント向けにも使えますが、他の代替手段の方が効率的なコミュニケーションを図るには優れていることも多いです。アドバンテージは人によって異なるでしょう。ビデオとプレゼンテーションのプロトタイプで、利益率を上げるために作られたものは商業型の公式に従います。聴き手が共感できる問題を提示する。あなたの製品によってその問題がどのように解決されるかデモを示す。 (オプションとして)会社のマスコットをデジタル形式で表現して、キャッチフレーズを叫ばせながら楽しそうにダンスさせる。これらのプロトタイプの中にはアイコン、テキスト、イラストレーションを使うだけで完成するものもあります。他にはアニメーションを利用して、要点を説明するのに動きを使うこともあるでしょう。あなたのアイデアを売ることができれば、正しく使いこなせているといえます。ビデオのプロトタイプと紙のプロトタイピングを組み合わせた良い例をご紹介します。Video Prototype for Mobile Cooking App : Youtube動画よりワイヤーフレームワイヤーフレームは紙面上かアプリにおいて作成できます。ワイヤーフレームは通常ローファイプロトタイプと見なされていますが、時間をかければミディアムファイプロトタイプにアップグレードすることも可能です。もっとも労力をかけるだけの価値はほとんどありませんが。ワイヤーフレームは、作成されるのも破棄されるのも速いです。紙面上でワイヤーフレームを作成することが魅力的である理由の1つです。アプリでワイヤーフレームを作ると、より正確なデザインが可能となり、既存のワイヤーフレームから簡単に編集することもできます。しかし、あなた自身以外には誰も見ないであろうスケッチを速く作成できるという点が、やはりワイヤーフレームの長所として一番優れています。しかし、すで述べたようにアプリでワイヤーフレームを作成すると、より簡単にインターフェースの機能を模倣できるというメリットもあります。紙面上に作成したワイヤーフレームをタップしたところでトントン音が鳴るだけですから、面白いかもしれませんが、あなたの意図するところを伝えることはできません。紙のプロトタイプこれはただのスケッチではないという点で、紙面上のワイヤーフレームとは異なります。紙を利用するのは、物理的でフラットな素材でインターフェースのモデルを作るためです。先にご紹介したビデオのプロトタイプにもその例を見ることができます。インターフェースの要素は、紙にスケッチして、カットして作ります。コピーして予備を作ることもあります。そして作ったピースを他の紙の上に集めます。ある要素のサイズが間違っていれば、他の要素の並びを変えたり、新しいサイズの要素を紙をカットして作るなどの方法があります。またワイヤーフレームより「本物」らしいといえます。特に面白さはないとしても、クライアントは紙のモデルを触ることができます。この触覚に訴える方法はクライアントに多くを説明できるので、他のどんな方法より優れていることもあります。誰でも対象をより深く理解するためには、物理的なコンタクトが必要です。UXデザインの半分は、物理的なインタラクションの使い心地を、デジタルのインターフェースで作り直す作業であるといえます。アプリで作成するミディアムファイおよびハイファイプロトタイプこれらは紙のプロトタイプとの共通点が多いです。以下でご紹介するInvisionなどのアプリで作成するプロトタイプは、あらかじめデザインしたインターフェースの要素をもとに作り始め、これらのピースを集めて完成品を模倣します。異なる点は、全ての作業がスクリーン上でなされることです。完成製品のグラフィック作成やブランド化も可能であり、プロトタイプであっても完成製品のように作成することができます。その次はすでに述べたことですが、アプリによって製品のデモをブラウザやモバイルデバイス上で行うこともできます。また手で触れて感じることも可能になります。クライアントの触覚に訴えることで、もし気に入ってもらえれば、最終的な承認を得たも同然です。コードもちろんインタラクションを必要とする場合には、インターフェースのプロトタイプをコードで作るのがいい方法です。その理由もご紹介します。あなたのワークフローによく合う(とにかくブラウザ上でデザインするような場合)。作成するサイトやアプリに、ボタンなどのインタラクティブな要素が多数存在している。製品作成の最終段階でプロトタイプのコードを利用すると、時間の節約になる。インターフェースの機能性のデモを、アプリを使わずにブラウザ上で実行したい。あなたがキーを押すのが好きで、クリックするのは嫌いである。ブラウザ上でプロトタイピングを行うと、特に修正版を作成中はやや時間がかかります。製品の初期段階ではおすすめしません。ミディアム～ハイファイプロトタイプで使うのがベストです。すでにHTMLやCSSで作業を進める方法を好んでいるとしたら、完成間近のプロジェクトを提示するには最良の方法の1つです。フレームワークによるプロトタイピングフレームワークを利用すると、コードを使ったプロトタイピングのスピードを相当上げてくれます。さらに、完成製品用のフレームワークを利用するとしたら、コーディングの量も少なくて済みます。補足として、BootstrapやFoundationのような人気の高いフレームワークを利用して構築された、ドラッグ＆ドロップ形式のWebページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

アプリデザイン

プログラミングに使える！フリーのテキストエディタ15選

プログラミングをこれから勉強する場合、「どのエディタを使ったらいいの？」という疑問を持つかもしれません。そこで、初心者にもおすすめのテキストエディタをピックアップしてみました。また、テキストエディタ以外に統合開発環境も一緒に紹介します。 Windows、Macそれぞれに使えるエディタで、できるだけ日本語に対応したものを選んでいます。紹介するテキストエディタを比較して自分に合ったものを探してみてください。そもそもテキストエディタとは何なのかよく分からないという人でも知っておいて損は無いでしょう。なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。目次テキストエディタとは TeraPad(テラパッド) サクラエディタ Atom Notepad++（ノートパッドプラスプラス） CotEditor mi Sublime Text Brackets 秀丸エディタ Liveweave mou Visual Studio Xcode Eclipse vi(vim) / Emacs Visual S Visual Studio Code テキストエディタとはテキストエディタとは、パソコン上でメモやプログラムを書くことのできるソフトです。基本的には無料のソフトが多く、Windowsでは「メモ帳」、Macでは「テキストエディット」という名前のアプリケーションがデフォルトで入っているかと思います。もちろんそのアプリケーションを使ってプログラミングをしたり、執筆作業をすることもできますが、プログラミング用のテキストエディタを使うことで便利な機能が多く効率的に開発作業を行うことができるのです。外部ツールを取り入れることができたり、画面を分割して複数のファイルを同時に確認することができるなど様々な機能が備わっています。フォントや色なども自分好みに合わせることができるので、プログラミングをする人は専用のテキストエディタをインストールすることをおすすめします。今回紹介するテキストエディタは、利用する人も多く人気のソフトが多いので、まだ使ったことがない人はぜひ選ぶ上での検討材料にしてもらえればと思います。 [PR] Webデザインで副業する学習方法を動画で公開中1. TeraPad（テラパッド） Windows用のテキストエディタです。国産のエディタですのでインタフェースが日本語です。シンプルさを特徴としており複雑な設定が必要ありません。ソースコードの色分け機能などが付いており初心者でも安心して使えます。英語のエディタでは分かりにくく、すべて日本語であってほしいという人にはおすすめです。機能面はそこまで充実してるとは言えませんが、使い勝手は良いでしょう。 TeraPadの使い方 2. サクラエディタ Windows用のテキストエディタです。オープンソースでだれでもソースコードを編集できるため、多くの開発者によって機能が追加されてきました。こちらも国産エディタなのでインタフェースは全て日本語です。複数のファイルから同時に検索できるGrep機能や、キーボードマクロの登録などが可能で、豊富なカスタマイズ機能を持っています。サクラエディタの使い方コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、

プログラミング

【Atom、Sublime、Visual Studio Code、Vimの人気エディタを徹底比較】ベストなテキストエディタはこれだ！

本稿は、Codementorのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また本記事は、10年以上リードエンジニアとして活躍するMatt Goldspink氏によって投稿されました。プログラム記述用テキストエディタが溢れる今日この頃ですが、そこから一つを選ぶとなるとそれは難しい問題でしょう。「開発者にとって最適なテキストエディタは何ですか？」という質問への回答はすぐには見つかりませんが、ここでは Atom, Sublime, Visual Studio Code, Vim という4つの人気のエディタについて比較してみます。ここでの比較が、読者のニーズに合ったエディタを選択をする一助になれば良いなと思います。お断り：ここでのいくつかの比較は主観的であり、ほとんどが私の個人的な好みに基づいています。私はMac用のSublimeを使用してWeb（HTML、CSS、JavaScriptなど）の記述を行なっています。そのため、評価の視点は使い慣れているものに多少傾いてはいますが、できる限り客観的に評価を行いました。目次 Atom Sublime Text Visual Studio Code Vim Atom Url: https://atom.io/ 費用：フリー(MIT Licence) 開発者：GitHub プラットフォーム：OSX, Windows, Linux Atomは21世紀に向けて改良可能なテキストエディタと言われています。 Atomは比較的新しいテキストエディタで、2014年に最初にリリースされて以来、多くの人気を集めています。では、メインの機能から見てみましょう。パッケージ編集機能を追加できることはたいへん重要ですが、このエリアはAtomが得意としています。標準でインストールされるパッケージマネージャがこの機能を果たし、全てのパッケージはGithubで管理されています。現在では、6,452個という多数のパッケージとテーマが利用できます。Atomにとってパッケージは基本的なものであり、プリインストールされたツリービューと設定ビューの機能でさえも単に最初から組み込まれたパッケージなのです。編集とワークフロー Atomでは全ての機能がスムーズに操作できます。では、最大の弱点はなんでしょうか。考えた末に出てきたのは、使い始めた際にどの追加パッケージをインストールすべきかを見つけるのに苦労する点です。例えば、私はファイルの一部分を視覚的にスキップできるミニマップを愛用しているが、この機能をセットアップするためには「オートコンプリート+」を使用して、自動補間機能を設定する必要がありました。私はよく複数のファイルを同時に開いて作業するので多くの場合、分割ペインの編集を設定する機能は必須ですが、これはAtomがうまくサポートしてくれている機能のひとつです。 Sublimeには無いAtomのもう1つの優れた機能は、ツリービューでのファイル/フォルダのドラッグ&ドロップのサポートです。私は周りのものをシフトできる機能がSublimeに無いことを知ってはいましたが、この機能はとても役に立つのです。最後に、gitとの統合は素晴らしいのではありますが、結局は GitHub側で構築された結果なのです。カスタマイズエディタを自分の開発フロー、およびスタイルに合うようにカスタマイズする機能は必須です。私は「保存する時に空白を取り除く」,「編集していないファイルを保存する」という設定をいつも使っていますが、これらを有効にしたり、無効にしたりすることは簡単に行うことができます。 Atomには優れたドキュメントが用意されており、そこにはスタイルを再設定する方法も書かれています。私は構成設定に優れたAtomを好んで使っています。ファイルの種類ごとに設定の上書きができる機能は素晴らしい。例えばJS, CSS, HTML に別々の設定をすることはAtomでは容易なのです。パフォーマンス Atomを選ぶ際に問題になるとすれば、それは処理速度です。ファイルを開いたり、タブを切り替える毎に生じるタイムラグは苦痛です。（本格的な開発の編集に使っている場合には特に気になります）Atomの最初のリリースではそこが問題点であり、最近ではかなり改善されてはいますが、まだまだ不十分です。まとめカスタマイズを簡単に行いたいというユーザーにとってはAtomは優れたツールです。修正、追加、拡張性の自由度は大きな力を与えてくれます。ドキュメントも優れています。私としてはやはりパフォーマンスの点が気になりますが、Atomはフリーのエディタとして光っているのは確かです。 Atomの使い方 [PR] Webデザインで副業する学習方法を動画で公開中Sublime Text Url：https://www.sublimetext.com/ 試用するにはライセンス費70ドルが必要開発者：Jon Skinner （前グーグル技術者）プラットフォーム：OSX, Windows, Linux Sublimeは2007年にリリースされ、ほぼ10年が経過しています。Stackoverflowの2016年の開発環境調査ではSublimeは第3位にランクされています。 V3Betaは最新バージョンで、長い間Betaバージョンのままです。気にすることはありませんが、新版はたいへん安定しています。パッケージ最初にインストールするSublimeのパッケージはコントロールプラグインであるようです。Sublime 3ではこれらがデフォルトで追加されていることを期待しています。 Atomと同様にSublimeでもたくさんのパッケージとテーマが用意されていますが、私にとって必要なのは次の3つです。 SideBarEnhancements：これを使わないとファイルのリネーム/移動/複製はできません。 SublimeLinter：異なるプログラム言語にlintを追加するのに必要です。 GitGutter：git 上の状態をラインナンバーの左に表示します。 Sublimeにおいても多くの(パッケージの)中から選択ことが出来ます。Sublimeのパッケージサポートは全体的によくできているのですが、最初に使い始める際に複雑な手続きがあるというのがちょっと残念な点です。編集とワークフロー重要なプロジェクトでは、Sublimeを使ってきました。ファイルの検索、ファイルの内容の検索は高速で簡単です。私は何百ものファイルからコードの断片を検索する作業をよく行いましたが、Sublimeの処理速度に不満を持つことはありませんでした。 Atomと同様に、Sublimeの本領はいくつかのキープラグインをインストールしてから発揮されます。正しい文法ハイライトを行うにはJSONフォーマッタ、LINTなどのインストールで時間が取られますが、一旦インストールしてしまえば再び触る必要はありません。カスタマイズ前述しましたが、SublimeはAtomと非常によく似ています。「フォーカスが無くなったら保存する」、「空白を取り除く」の設定も可能です。設定ファイルは簡単なJSONで書かれており、隠された全体のホストの設定があります。パフォーマンス SublimeがAtomより優れた点として、オープニング、クロージング、検索などがたいへんスムーズで速いことがあげられます。まとめ冒頭に述べたように、私は長年のSublimeユーザーなので、ここでの私の意見は少しだけSublime寄りではありますが、一般的にはSublimeは柔軟性があり高速なエディタであるとされています。 2016年の開発環境のトップ3に入るだけの理由はあるのです。 Sublime Textの使い方 Visual Studio Code Url: https://code.visualstudio.com/ 費用：フリー開発者：Microsoft Platforms：OSX, Windows, Linux Visual Studio Code(VSCode)は比較的新しいテキストエディタです。昨年(2015年4月)にリリースされていますが、すでに大きな牽引力を持っています。Microsoftはパワフルで柔軟性のあるクロスプラットフォームエディタを作り出すという大きな業績を残しました。そのプラグインは開発者からの注目を集めています。パッケージ他のエディタと同様に、VSCodeもよくできたプラグイン（エクステンション）を持っています。エクステンションの管理は内蔵されており、何百ものエクステンションが利用可能になっています。これがAtomでは、いくつかのものだけがデフォルトでインストールされています。自分のワークフローに最適なプラグインを選ぶのに多少の時間はかかります。私の好きな（そして私がVSCodeで興味深く思うのは） Chrome用のデバッガです。これを使ってVSCodeの中からブレークポイントをセットしてJSをデバッグできます。同じことはNoode.jsでもできます。つまり、JSCodeからブレークポイントをセットして、ターミナルのノードプロセスが走っている状態でステップ実行させることができるのです。編集とワークフロー VSCodeはAtomと似たやり方でElectron、Node、HTML/CSSを使っていますが、タイムラグもなく極めて高速です。私は、エディタを一週間使用してみて、かなり満足しました。Sublime,Atomに非常に親和性がありました。前述のデバッグ機能は拾い物でした。入力補間（最初は設定に苦労しましたが）が一日かそこらで利用できるようになりました。私はすでに引数を覚えていなくても、関数名を入力することに関しては達人になっていました。カスタマイズ前述の2つのエディタのようにVSCodeにもカスタマイズ機能はあります。wrapping, インデント、テーマなど必要な全ての機能が用意されています。パフォーマンス前述しましたが、VSCodeは(Atomと同様に)、Node.js, Electron, HTML, CSSを使って作られていますが(Atomとは違って)　明らかに高速です。起動、終了時のタイムラグも感じないし、検索も速いです。察するところ、AtomとVSCodeの違いはUIエディタがMonaco(Visual Studio Onlineより)で作られていることだと思われます。これがパフォーマンスの違いの理由だと思いますが、とにかくパフォーマンスはSublimeと同等なのです。まとめ全体を見て私はVSCodeの検討結果にたいへん感激し、より継続して使うことも考えました。私は完全に乗り換えるためのステップを踏んでいる状態ですが、Sublimeと同様の設定をしてみたこの休日は楽しいものとなりました。結局、私はSublimeを長く使い過ぎたようです。Gitとの統合、エディタ内デバッガーはすばらしい機能であり、私がSublimeを使って苦労していたことが、VSCodeを使うとあっと言う間にできてしまうのです。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。

プログラミング

これからのエンジニアに必要なスキルとは【非エンジニアサミット・イベントレポート】

TechAcademyでは、2015年6月14日に『非エンジニアサミット「プログラミングをシゴトにする」』というイベントを開催しました。これからプログラミングの学習を始める方を対象に、第一線で活躍するエンジニアから直接話を聞けるイベントです。第1回目となる今回は、株式会社クラウドワークスCTOの大場光一郎氏、株式会社Fablicの堀井雄太氏をゲストとしてお迎えしました。本記事ではイベントレポートをお届けします。これからプログラミングの学習を始める方は参考にしてみてください。ゲスト大場光一郎氏（株式会社クラウドワークス執行役員CTO） 2001年、伊藤忠テクノソリューションズ株式会社へ入社。在職中、Rubyの導入支援やRubyを用いたクラウドサービスの開発・運用に従事。グリー株式会社インフラストラクチャ部門にて、開発環境からプロダクションをつなぐDevOps周りを担当し、GitHub Enterpriseの導入による開発品質の向上や、デプロイメント支援システムをRubyで開発。 Rubyやソースコード管理に関する講演、著書多数。 2014年1月、株式会社クラウドワークスに参画、執行役員CTOに就任。堀井雄太氏（株式会社Fablic チーフエンジニア）「Fril(フリル)」を開発しているエンジニア。2007年、株式会社ECナビ（現：VOYAGE GROUP）に新卒入社。比較サイトの運営やディレクトリ検索サービス、広告配信システムの開発などを経験。2012年、株式会社Fablicを創業し女性向けのフリマアプリ「Fril」を開発、インフラ、サーバーサイドの開発担当。クラウドワークス大場氏講演まずは、大場光一郎氏から講演いただきました。講演では、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することをお話しいただきました。エンジニアになったきっかけ学研の教材に載っていたマンガがきっかけでBASICを使ってプログラムを書いてゲームを作りながら自分でやってみようと思ったのが、一番最初にプログラムを書くことのスタートだったとのこと。その後は、ハードウェアを組み合わせた業務システムを開発している会社に入社。当時は「プログラムさえ書ければいい」と思って社会人をスタートしたそうです。その時のことを大場氏は「今から考えると当たり前ですが振り返るとコードを書けるだけで会社を選ぶのは良くない」とも語りました。またその頃、働いていた会社とは別に、オープンソースを開発するプロジェクトに入り、そのプロジェクトの開発者との交流を通じて、組織の垣根を越えてプロジェクトを進めることを経験したそうです。そのため、大場氏の考え方の根本は「オープン」。実際仕事の中でもオープンソースのように仕事をしているのが特徴なんだそうです。クラウドワークスでの開発体制クラウドソーシングサービスのクラウドワークスの開発体制はどうなっているのでしょうか。特徴は、UX改善会を開催してユーザー体験を大切にした開発を重視していること。「UX改善会」は、3、4人のチームを組んで、ユーザー視点でサービスを使い、サービスにおける課題を見つけ、改善案などをプレゼンテーションに落とし込んで全社員に発表するというもの。社員はもちろん、エンジニアインターンの学生から率直な意見を聞いて改善に役立てているといいます。この取り組みにより、サービスを使い続けていると当たり前になって気づかないことを、改めてフレッシュな気持ちでサービスを見つめられ、実際にサービス落としこんで、日々改善ができているんだそうです。開発分野の他に、クラウドワークスでは日報の書き方にも工夫があり、お互いがどんな仕事をしているか共有し合えるように、他の部署の人でもわかる言葉で伝えることを推奨しているそうです。これからエンジニアを目指す人に期待すること大場氏は「今は技術が折り重なってできているので、深堀りすればするほど深いし、技術の移り変わりも早いので、エンジニアとしては多層的に折り重なる技術を同時に理解できないといけない状況です。」とエンジニアとして必要なことを語りました。そのような状況の中で、初心者としてプログラミングをはじめるのは、チュートリアルなどが充実しているため、比較的簡単で、初心者から中級者に上がるにはいろいろな技術をキャッチアップする必要がでてくるため、1人では限界があるとのこと。そのため大場氏は、勉強会を通して仲間を見つけることや、プログラミング学習のサービスの活用などを推奨しているそうです。また、JavaもRubyも最初は「おもちゃ」と言われていた背景があり、「おもちゃ」と言われているような技術を使ってみることの大切なんだそうです。「イノベーションを起こすようなものは最初おもちゃのように思われがちですが、だからこそチャレンジすることが今後のエンジニアに必要なのではないか」と大場氏は締めくくりました。 [PR] Webデザインで副業する学習方法を動画で公開中Fablic堀井雄太氏講演続いて、堀井雄太氏に講演いただきました。大場氏と同じく、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することお話しいただきました。エンジニアになったきっかけもともとは経済学部出身で、大学でもプログラミングの授業で受けていたわけではない、いわゆる文系プログラマーだという堀井氏。それでも大学生のころから漠然とWebサービスを作ってみたいと思っていたそうです。そこで大学生のうちにいろいろな会社でインターンをとして働いていたのがプログラミングを学ぶきっかけ。最初はHTML/CSSを使ってWebサイトを作るところからはじめ、本を読み込んでサービスを作ってみるなど独学で学んだとのことです。その後、ECナビ（現在のVOYAGE GROUP）に新卒で入社し、自社プロダクトの開発と運用をして、後半の2年はインフラの部署に所属されていました。会社に所属することのメリットとしては、独学よりも体系的に学べる、先輩や同僚がいることで成長できるなどを挙げていました。堀井氏が講演の中で話した、「エンジニアとしては遅咲きだが、遅いということはない。意志があれば、とりあえずやってみるのが大事」という言葉が印象的でした。 Frilの開発体制株式会社Fablicは、2012年7月にフリマアプリのFril（フリル）をリリース。累計ダウンロード数が300万を越えているといいます。現在は、12、13人のメンバーで開発しているそうです。エンジニアはまだまだ増やしたいとのことで、募集も随時行っているとのこと。開発体制として特徴的なことは、ユーザーと一緒に開発すること。実際にFrilを使っているユーザーをカスタマサポートとして採用しているそうです。開発の現場にユーザーがいて、「困ったことがあったらユーザーに聞く」が信条で、実際の開発フローにユーザーが関わるようにしているといいます。これからエンジニアを目指す人に期待することどんなエンジニアになるかを意識することが大事とのことです。会社のフェーズによってエンジニアに求められることは違うので、技術の経験たくさんを積むことが大事。堀井氏自体も、サーバーサイドもインフラも関わってきましたが、今では全てが関係しているそうです。それぞれの領域を学んでいく中で、強みを形成していくのが良いとのことでした。また、技術を学ぶだけでなく、行動して実践することも大事。チームで開発できる、社内で共有できる、社外にアウトプットできる、リーダーシップを発揮できるなど、技術をもとに行動することが今後のエンジニアに求められていると語っていました。また、最後には「ものづくりは楽しいので、楽しみながら開発していくのが大事」というメッセージで堀井氏は締めくくりました。パネルディスカッション「これからのエンジニアに必要なスキルとは」続いて、大場氏、堀井氏によるパネルディスカッションです。モデレーターはTechAcademyを運営するキラメックス株式会社の代表取締役社長の村田がつとめました。パネルディスカッションでは、事前に参加者から募集した質問をもとに回答いただきました。質問はこれからエンジニアになっていくことを想定して、下記のセクションに分けて進めています。エンジニアになる前の段階エンジニアとして働く段階エンジニアとしてさらにスキルアップする段階エンジニアになる前の段階（村田）それではパネルディスカッションを始めていきます。非エンジニアの方のプログラミング学習が一歩前に進むきっかけになればいいなあと思っています。最後には会場のみなさんからの質問も受け付けます。（村田）まず1つ目の質問ですが、「どのプログラム言語から勉強するべきか」という疑問にお答えいただこうと思います。これみなさん非常に悩ましい点だと思うのですが、このあたりお二人はどのようにお考えでいらっしゃいますか？（堀井）最初はPHP、Perl、Rubyあたりから始めるといいのかなあと思っています。理由は、コミュニティが活発なので困ったらそういうコミュニティに相談して聞く環境があることですね。あとは、実際に企業に入ってみて使われていることも多いです。実際、私が新卒で入った会社も主要な言語がPHPであとPerlとRubyも少しあったので就職するときも有利だと感じています。（村田）なるほど。大場さんはいかがでしょうか？エンジニア歴も長いと思いますが。（大場）最初に触る言語としては僕はなんでもいいかなと思ってるんですけど、子供向けや教育向けと呼ばれる機能が制限された言語よりは汎用的な言語を使った方がいいかなと思っています。それがコンピュータが本来持っている能力を引き出せる可能性があるという理由です。なので、あんまり学びやすさとか初心者向けといった軸で選ぶよりは、なんでもできるような言語を選ぶのがいいのではないでしょうか。（村田）では続いてプログラミングを勉強する段階になった際に「どこから着手すればいいか」という質問に入っていきたいと思います。具体的にあれば教えていただけますか？（大場）さっき話したことと関係しているのですが、一つのサービスを成り立たさせるためにはいろんな技術の積み重ねがあって、一部分だけわかっててもサービスとしては成り立たないことがあります。だから、どこからというよりは「これが作りたい」とか「こんなサービスをやってみたい」といったところを目指して、それに足りないのはどこなのか、簡単そうなのはどこなのか、一番難しそうなのはどこなのか、そういう切り分けでちょっとずつ自分がどこにいるかわかるように進めるのがいいんじゃないかなと思います。この言語を覚えたいといった学習の仕方だとモチベーションが続かないと思うんですよね。（村田）それはありますよね。（大場）コンピュータという分野も3ヶ月勉強した人や10年仕事で使ってますという人とか経験にいろいろあっても、その中で「マスターしました」って自分で言える人はあんまりいないと思うんですよね。すごい奥が深い世界なんで。だからこの言語をマスターするまでやろうとなると結構どこまでいっていいかわからない。なので、道具として何をやりたいかというところを目標にすると続きやすいんじゃないかなと思います。（村田）目的ありきでその言語をツールとして使って、形にしていくところから足りない部分を補うのがいいんじゃないかということですよね。堀井さんはいかがでしょうか？（堀井）大場さんも仰ったように一つを学べば終わりというものではないですね。プログラミングをするモチベーションを保たないと結局意味ないので、自分がこういうのがあったら便利だなというものをとりあえず手を動かしながら作るのがいいと思います。（大場）さっきTechAcademyのオンラインブートキャンプの説明の中で、Twitterクローンを作るというお話しでしたが、あれってどこまでのクローンなんですかね？投稿するだけだと簡単だけどTwitterを真面目に作ると結構難しいと思うのですが。（村田）Ruby on Railsチュートリアルに載ってるくらいのマイクロポストみたいなレベル感ですね。ユーザー登録ができてフォローして、その投稿がそれぞれタイムラインに一列に出てくるクローンです。（大場）フォローもするということは、ある程度データベースの関係性もグラフみたいなところもやるんですね。そういう意味では歯ごたえのある感じですね。（村田）そうですね。実際に世界中で使われているようなサービスに近い形で作る方がモチベーションが上がると思っています。全く使わなそうな図書館データベースを作るよりもTwitterクローン作る方がイメージがわきやすいし面白いなと感じてもらえるはずです。プログラミングを学習するときのモチベーション、特に一人で勉強する時間が長いので、自分がやる気になるようなところから始めるのがいいのかもしれませんね。（村田）では次にいきましょう。「プログラミング習得をする上でつまずきやすいポイントとその解決方法」について聞いてみたいと思います。堀井さんいかがですか？（堀井）つまずくところいっぱいありますね。特に、環境構築が一つのハードルになるかなと思ってます。弊社でもインターンに来てもらうことが多いのですが、プログラミングを書き始めるまでの開発体制を整えるところで時間がかかることがあります。ただ、今はEC2とかHerokuとか、必要なパッケージがそろっている状態で始められるものもありますね。無料プランを使うか、少しお金を出せばサーバーが簡単に手に入るので、うまく使って最初のハードルを乗り越えてから本を一冊写経してみるといったことから始めるのがいいのかなと思ったりしますね。（大場）個人的には難しいところって技術と技術の境目の部分かなと。例えば、Rubyだとアプリケーション開発の知識がいるし、データベースにアクセスするときにSQLみたいな言語をわかってないといけないし、両方わかってないといけないようなシチュエーションがサービス開発の中でたくさんあります。両方の知識が求められるところでハードルがぐっと上がって、新しいことを覚えるのが難しいのかなと思いますね。その解決方法としては繰り返すということですかね。繰り返していると、「これはこのことだったんだ」みたいに理解できることもあるので、反復するところがコツかなと思っています。もう一つつまずきやすいところとしては、技術の中でそもそも難しいところです。C言語だったらポインタ、Rubyだったらブロックとかですね。そもそも考え方が難しいものがいくつかあって、それを変な例えで理解しようとしても、結局どこかで嘘が入っていたりして本質的には理解できないところがあります。それは難しいものだと受け入れて、わかるまで何回も繰り返すところが必要なんじゃないかなと思っています。（村田さん）そうですね。僕も最初はPHPから始めたんですけど、クラスみたいな概念がそもそも理解できなかったです。その時は、10日くらいわからないまま続けたら理解できました。繰り返しながらやっていくと、ピーンとわかるときがくるので諦めずに繰り返すのが重要ですね。（大場）悟るまでですね（笑）（村田）悟りが降りてきますからね。さて次の質問ですが、「おすすめのプログラミング学習方法はありますか」ということです。いま繰り返しやるとありましたけれど、もうちょっと具体的に聞きたいと思います。大場さんは仕事を始めてから学んだという感じですか？（大場）まあプログラムを書くのがもともと好きでゲームをつくるなかで学びました。Windows3.1が出たときに「マインスイーパ」というゲームが入っていたのですが、当時Windowsが動くパソコンがすごい高かったんですよね。なので、みんなができるように、MS-DOSのキャラクターベースでできるマインスイーパを開発してみんなに配ったとか、そのなかでいろんな技法みたいなものを学んでいったというところです。今はほんと一つのアプリケーションを成立させるのにいろんな技術が必要なので、競争仲間であるとか教えてくれる先輩とかそういう人がいる環境に身を置くところが大事かなという気がします。（堀井）小さいところから考えて手を動かすのがいいかなと思っています。会社に入ってみて思ったのが、システムって完璧じゃなくてすでに困っている人がいるんですね。そこで私もわからないなりに、管理画面にあったらいい機能とかを他の部署の人から聞いたりして、改善や機能追加できるところを調べながら徐々に開発技術を学んでいくところがありました。あとは、勉強会もおすすめです。新卒で入った会社では勉強会を定期的に開催していたので、自分の回が来たら学んできたことを発表しなきゃいけない場がありました。そういう半ば強制的にでも自分のスキルを底上げするようなイベントに身を置いてステップアップしていくのはいいかなと思います。（村田）なるほど。僕も自分で学習してきていたときは、何かインターネット上で気になるサービスをまねてそれと同じ動きを作ってみることをしていました。あとは、わからないところでずっと迷ってるとやる気がなくなっていくので、すぐ人に聞くというのは結構重要ですね。僕は新卒で楽天に入ったので、エンジニアの部署にいる同期を休日にカフェとかに呼び出して、わからないことを聞くというのを結構な頻度でやってました。（大場）あとはオープンソースの開発に関わっていくこともいいですね。そんなに難しくなくても手が足りないというプロジェクトはたくさんあって、それこそプログラムだけじゃなくてドキュメントの追加みたいな簡単なところから手伝うこともできます。それでコミュニティの人たちの顔がわかってきて、だんだん開発に協力していく中でいいプログラムをたくさん読んで、自分がやるならどうしようみたいなことを考えたりすることがスキルアップにつながると思います。エンジニアとして働く段階（村田）では次の項目に入っていきますね。「採用したいと思うエンジニアの特徴」について聞いてみたいと思います。具体的にこんな人がいいなというものがあれば教えていただけますか？（堀井）大前提としてプログラミングが好きなことが当てはまるのかなと思っています。やっぱ好きな人って勝手に自分でどんどん技術習得して、自分自身でスキルアップしていくので根本的にプログラミングが好き、ものづくりが好きという素養はまず見てますね。あとは、Githubとかを使って自分が書いたコードを他の人に見てもらう、シェアするみたいな文化があると思うんですけど、自分の恥をさらすことができる、自分の持っていることをシェアするとかオープンさみたいなものを持っている人は素晴らしいかなと思いますね。（大場）堀井さんのお話の中でもサービス志向のエンジニアみたいな話題がありましたけども、スキルはすごい優秀だけどうちの事業にそんなに興味ないみたいな人は今のステージでは採用が難しいです。なにかしら共感をもってるところのプラスアルファでエンジニアリングを見て採用してます。（村田）会社の規模とかフェーズによっても変わってくるかなと思うんですけれども、やっぱりそのそもそものエンジニアとしてのプログラミングが好きであったりとか、サービスが好きみたいなところは基本的には重要ですよっていうことですね。（村田）では次です。「優秀なエンジニアはどうやって見極めているんですか？」という質問です。大場さんいかがでしょうか？（大場）正直言って僕もこれだというものはないですけど、一番確実なのは一緒に働いたことがある人ですよね。やっぱりいろんな会社にいると、こいつは本当にすごいみたいな人が何人かいたりします。（堀井）優秀の定義にもよるかなと思うんですが、見極めるとしたら今はGitHubとかあるので、どういうコードをその人が書いているのか、アプリなど個人でプロダクトを出しているのかとか見たりしますね。（村田）結局その人がどういう人かとか、どれくらいできるのかっていうのが見えるかどうかっていうのは結構重要なのかもしれませんね。ポートフォリオなりGitHubなり、今だとそういうのが結構アピールしやすい時代かなと思います。（村田）次に行きますね。「プログラミングスキル以外でエンジニアに求めることはありますでしょうか」という質問です。堀井さんどうでしょうか？（堀井）これはもうたくさんあります。まず弊社もベンチャーなのでプログラミングだけできる人は結構厳しいのかなと。具体的に言うと、やっぱコミュニケーション能力が高い人がいたら嬉しいです。実際、弊社はユーザーにヒアリングすることがあるので、ちゃんとそのユーザーさんとコミュニケーションが取れるかとか、仕様が上から降ってくるのを待つのではなくて自分で考えたものをデザイナーやディレクターに発表して巻き込んでいく力みたいなのが問われるシーンが多いです。（大場）エンジニアに求めるコミュニケーション能力でいうと、そもそも人と話すのが苦手だからコンピュータを扱う仕事を選んだみたいなところもあると思うんですよね。立ち上げ初期のベンチャーだと、とにかく作るというところがメインになっていて、そんなにコミュニケーションする必要がなかったりします。でも組織がちょっと大きくなってサービスが伸びてくると、ある時点からチーム開発みたいなものが求められて個人技だけでは限界がきたりします。そういう時にちゃんと自分に求められている役割の変化を感じて、それについてこれるかは考えてほしいなと思ったりします。具体的にはさっきの仕様の話だと、ゆるふわで落ちてきた仕様に対してこんな仕様でできるかと思うか、僕が決めてもいいんだというように受け止めるかで大きな違いがあると思うんですよ。それってエンジニアリングのバックグラウンドがあって、そういう幅のある仕様のなかで可能性として見られるかどうかっていうのは大きな違いじゃないかなと。（村田）自分から能動的に動いて、与えられたものだけじゃなくてしっかりそれ以外も自分で発信できるっていうことを理解した上でスキルを上げていけるような方が優秀になってくるし、それが求められるかもしれないですね。（村田）次の質問ですが、「エンジニアとして働き始めてからどんな勉強が必要ですか」とのことです。基本的にはエンジニアは日々勉強みたいなところがあると思うんですけど、そういったこと以外に何か具体的にあれば教えていただけますか？（大場）最近だとエンジニアの向かう方向性としてフルスタックみたいに、いろんな層の技術をまたがって自分一人でもサービス立ち上げができるみたいなところを目指したりもしますけど、実際本当に伸びてくサービス開発のなかでフルスタックになっていくのはめちゃくちゃ難しいと思っています。他に得意な人がいればなかなか手を出すのも難しい、どこをやってもいいよと言われても躊躇してしまうというところがあったりします。その中でできることは、一つひとつ極めていくところだと思っています。ただ、一個の技術だけで戦ってるとやっぱりリスクも高いので、次はこの専門家になろうみたいな二つ掛け合わせるものが何かあるといいんじゃないかと思います。（堀井）私はどういう勉強をしてたかなと思い返してみると、やっぱり学んでいくには段階的になると思うんですよね。一つの言語を学んで、データベースのことも学んで、今度はその言語の上に動いているフレームワークのことを学んだりと段階的に自分が学んだことに派生して勉強してきました。なので、最終的に自分が得意であると言えるくらいのところまで行けるように深掘りして、一つの技術を学んでいくのがいいのかなと思いますね。エンジニアにもスペシャリストを目指すのか、ジェネラリストを目指すのかいろいろ方向性があると思うんですけど、ひとつ自分はこういうエンジニアだとか自分の代表するプロダクトはこれだとか、そういうものを作れるようになるまでは深掘りすることがいいかなと思いますね。（村田）やっぱりエンジニアとしてどこか一つでもいいので、ある程度極めるというか、できたというところまでやって、そこからスキルの掛け算みたいなところが重要になってくるということですよね。エンジニアとしてさらにスキルアップする段階（村田）最後の項目に入っていきたいと思います。「エンジニアとしてどんなキャリアパスが描けると思いますか」という質問ですが、エンジニアとしてキャリアの長い大場さんお願いできますか。（大場）いまエンジニアの責任者として会社の中での役割を担っていますが、究極的には「事業のためにエンジニアリングをどうするのか」みたいな話になっていくかなと思っています。なので、技術だけではなくて、最近だとよく読んでいるのはマネジメントの本とかビジネス書みたいなところからキャッチアップするような勉強をしたりしてます。（村田）技術だけではなくて、その先の事業をテクノロジーで解決していくみたいなところに進めるようなパスがいいんじゃないかという話ですよね。（村田）では次に、「エンジニアが仕事したいと思う環境はどんなところですか」という質問です。堀井さんいかがでしょうか？（堀井）やっぱりエンジニア目線でいうと自由度が高いであるとか、個人の裁量が大きい方がチャレンジングなことがしやすいですよね。なのでそういう環境をいまの会社で作っていきたいと思ってます。弊社ののコアバリューがいくつかあるんですが、「エンジニアもチャレンジする」というのもあります。ある程度エンジニアの裁量でどういう設計をするかなど決められるような体制になっているので、自分がいいと思ったものをすぐ試せる環境があるのはエンジニアにとっていいのかなと思いますね。（村田）なるほど。では最後の質問として「エンジニアとして成長するためにどんな人がいる会社で働くべきだと思いますか」という質問です。いかがでしょうか？（大場）前職のように本当にエンジニアリングに関して職人みたいな人がいっぱいいるところにいて感じるのは、自分より優秀な人がいるところに身を置くことですね。自分が一番下手になって、あとは登っていくしかないみたいなイメージです。例えば、学生時代にインターンで初めてプログラミングをして、ベンチャー企業を手伝いながら一番下っ端でがんばってたらいつの間にか自分が一番詳しくなっていた。その後、さらに強い奴に会いにいきたいと言って弊社にジョインしてくれたエンジニアがいます。僕自身もいかに自分より優秀な人に来てもらうか、自分自身がキャップにならないようにすごく気をつけていて、優秀な人が活躍できるような環境や会社やサービスが大事だなと思っています。（堀井）これは私もほとんど同意見なんですけれども、自分よりも技術において素晴らしいと思った人がいるところですね。あとは、自分のスキルセットに近しいのを持っている人がいるような環境にいくと、自分のやろうと思っていることが一段引き上げられるのでいいのかなと思っています。あと最近は勉強会とか発表された資料とかがWebサイトにいっぱい上がっているので、そういうのを参考にしながら企業を選んだりするのはいいかなと思ってます。会場からの質問（村田）ここからは会場からの質問を受け付けたいと思います。ーー大場さんにお伺いしたいのですが、ご自身が英語情報で技術をキャッチアップするために気をつけられていることや、社内の方に英語の情報をキャッチアップするためにどんなことをしているのか教えていただけますでしょうか。（大場）今やってることでいうと、オープンソースコミュニティがだいたい英語ベースになっています。日本人しかエンジニアがいないプロダクトでもコミットとかは英語じゃないと受け付けない感じだったりします。社内に関しては、こうしないとみたいなものは今はないのですが、今週の気になる技術みたいなのを社内のGitHubにスレを立てて共有して、みんなが気になった技術は突っ込むようにしています。そういうときに情報ソースが英語のものがたくさんあるので、おのずと危機感が醸成されればと思っています。（村田）他のご質問はいかがでしょうか？ーーエンジニアが少なくて採用が大変だみたいなことを何かで読んだのですが、雇われる側としてどう感じておられるかということと、あと村田さんは育てる側としてどう思われるか教えていただけますでしょうか？（村田）まず育てる側の僕の方から話をさせていただきますね。まずエンジニアが足りてないところは事実です。エンジニアの採用が難しいっていうのは、そもそもマーケットに人材が少ないから取り合いになってるっていうのが一つあります。あとは統計的にもアメリカでは2020年には100万人エンジニアが足りなくなると言われています。日本でも2020年には20〜30万人ぐらいは足りなくなると言われています。インターネットを使ったビジネスはすごい盛り上がって市場も拡大しているのに、そこで働く人が増えていなければ足りなくなりますよね。僕らはそれをエンジニアを増やすことで解決したいと思っています。エンジニアになりたいという方は多いと思っていて、それでも増えないのは仕組みの問題もあると思っています。それが解決できる仕組みがあれば、人が足りないということに対してひとつの力になれるんじゃないかなと。エンジニアが足りないということに対して、大場さんはいかがでしょうか？（大場）エンジニアが足りないと言ってる会社も、2種類あるかなと思っています。 1つはよくよく聞いてみると、あまりエンジニアを大切にするような文化がなくてエンジニアが定着しない会社です。そういう会社の方は、「来てくれても半年くらいで辞めるから、辞めると思ってアウトソースすればいい」といったことを仰る場合もあります。こういったことが負の循環になって常にエンジニアが足りないことが常態化してしまう。僕らみたいなエンジニアリングの重要性を理解していて、Webサービス中心の会社だとまったく事情は違っていて、サービスの成長にともなって、さらに成長させるためにエンジニアは、明確に足りていなくてまだまだ必要だと思っています。TechAcademyさんみたいな取り組みでエンジニアが増えていくのはこれからの日本にはものすごい必要だなと思っています。（堀井）ベンチャーで最近伸びているサービスであれば、やっぱりどうしても人が必要になってきて、実際に弊社でもエンジニアは常にどの職種も募集しています。私もベンチャーの友達とか知り合いも多くて起業する人もいるのですが、その立ち上げにはやっぱりそれなりにWebのことがわかる人がどうしても欲しくなるんですけど、そういうスキルの高い人たちは大手であるとか名の知れた会社とかに勤めています。そもそもその会社からあまり転職市場に出てこないというのは肌感としてはあるので、僕らみたいなベンチャーはいかにいい人たちを見つけて会社のことを知ってもらって、採用につなげるかについていつも苦労しています。なので、需要はかなりあると認識しています。（村田）最後付け加えますね。プログラミングを習い事の視点でみると、換金性の高い習い事だと思うんですね。というのも、例えば10万円払って勉強してプログラミングが習得できれば10万円以上稼げると思うんですね。もちろんクラウドワークスさんのようなクラウドソーシングサービスで仕事を探してそれに応募して自分で遠隔の仕事をするのも一つだと思いますし、自分でメディアを立ち上げるのというのも一つでしょうし。そういった意味でも企業に入るだけじゃなくて働く方法はいくつかあると思います。（村田）お時間になりましたので、最後にこの会の締めくくりということで「これからプログラミングを学習するみなさんへのメッセージ」をお二方からお願いします。まずは堀井さんお願いします。（堀井）私も最初はプログラミング初心者だったんですけど、いろいろ学びながら実際にものづくりができるようになりました。最初はハードルの高い部分もあるのかなと思いますが、楽しみながら学んでいくと自分の可能性も広がって、キャリアを積む上でもいい経験だと思います。ぜひみなさんがんばって欲しいです。プログラミングは楽しいです。（大場）僕からは作るだけじゃなくて問題解決していこうみたいな話もしましたけれども、一方で何かを作り出す・生み出すということは本質的に楽しいことだなと思っています。例えば、快適に作るための環境を整えることに丸一日費やすとか、自分のエディタの設定とか、これだから開発しやすいみたいなことを考えながらものづくりを純粋に楽しむところも実際にあるんですね。そういった気持ちってなかなか社会人になってしまうと忘れてしまったり、思い出せなかったりとかあると思います。今だと、エンジニアになろうみたいなフェーズだといくらでも失敗できるので、何度も作ったり壊したりしながら、ぜひものづくりの楽しみというところを大切にエンジニアを目指していただければなと思いました。（村田）堀井さん、大場さん今日はどうもありがとうございました。イベントレポートは以上です。 TechAcademyではこれからもプログラミング学習者のためのイベントを開催していきます。プログラミングを独学で学習していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない・独学のスキルが実際の業務で通用するのか不安・目標への学習プランがわからず、迷子になりそう

イベントレポート

スマホ対応！CSSでメディアクエリの書き方【初心者向け】現役エンジニアが解説

今回はBootstrapなどを使わずにレスポンシブページを実現する方法であるメディアクエリについて説明します。 Webサイトを作る上でスマホ対応は当たり前になってきています。メディアクエリとはメディアタイプやメディア特性によって表示を変えるレスポンシブデザインで利用する設定です。レスポンシブデザインではスマホやタブレットやPCによって変わるメディアタイプやメディア特性に応じた最適な表示にするデザインを言います。メディアクエリを理解することはレスポンシブデザインへの理解へとつながる基礎的な部分になります。メディアクエリを理解することで、Web制作において様々な端末で最適な表示を可能にできます。これからWebサイトを作る上では必ず必要になる知識なので、ぜひ今のうちに習得しましょう。目次動画で学ぶ！メディアクエリとはメディアクエリとは Web制作で推奨されているメディアタイプメディア特性メディアクエリの書き方複雑なメディアクエリの組み合わせを実現する方法実際に書いてみよう田島悠介今回はメディアクエリを利用する方法を解説しよう。大石ゆかり田島メンター！！メディアクエリというのは何ですか〜？田島悠介スクリーンや印刷などのメディアタイプに加えて、さらに縦横の長さなどによるスタイルの適用範囲を決めることができるものなんだ。大石ゆかりなるほど、いろいろな条件に対応して見え方を変えるという感じでしょうか？よろしくお願いします！動画で学ぶ！メディアクエリとは今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 [PR] Webデザインで副業する学習方法を動画で公開中メディアクエリとは今や、Webページを閲覧する際にレスポンシブデザインであることは当たり前になりつつあります。メディアクエリはCSSを用いて、レスポンシブなWebページを作ることができます。 CSS3になってから登場した新しい表現なのでぜひ習得していきましょう。メディアタイプの種類メディアタイプ対応デバイス all すべてのデバイス braille 点字用ディスプレイ embossed 点字用プリンター handheld モバイルデバイス print プリンター projection プロジェクター screen ディスプレイ speech 音声出力デバイス tty 固定幅フォントで出力するデバイス tv テレビなお、メディアクエリ4からは、screen, print, speech, all を除くすべてのメディアタイプを非推奨に指定されています。 Web制作で推奨されているメディアタイプ Web制作で推奨されているメディアタイプは以下の4つです。 all screen print speech について詳しく解説していきます。 all すべてのメディアタイプに適用されます。コード例 @media all { p { color: green; } } 表示結果解説次のように@media allで宣言して{}内で指定のcssを記載すると適用されます。 allで適用すると結果的にすべてのメディアタイプで同じ処理になります。今回はcolor: white;で色が緑色になります。 screen ディスプレイが存在するメディアタイプに適用されます。 PC、スマホ、タブレットはscreenです。 screenの動作 See the Pen medis by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 screenのcolor:redという指定で文字が赤色で表示されています。 print 印刷用に適用されます。印刷プレビュー画面で確認できます。 print表示結果解説 screenのコードを印刷プレビューすると、青色になります。 speech 音声読み上げ機能の際に適用されます。今回は、次のコードで「メディアタイプによる、色、処理の変化」音声出力した場合、「、」の部分で空白時間が発生し、自然な語り口になります。 @media speech { p { speak: literal-punctuation; } } コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。

CSS

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

Chromeの新しいタブを開くだけでエディタに！「Web Maker」で作業効率が上がる！

関連するキーワード

あわせてよく読まれている記事

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

プログラミングに使える！フリーのテキストエディタ15選

【Atom、Sublime、Visual Studio Code、Vimの人気エディタを徹底比較】ベストなテキストエディタはこれだ！

これからのエンジニアに必要なスキルとは【非エンジニアサミット・イベントレポート】

スマホ対応！CSSでメディアクエリの書き方【初心者向け】現役エンジニアが解説

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ