TechAcademy（テックアカデミー） Webデザインコース Webデザイン 簡単にECサイトが完成する！ネットショップ作成でおすすめのテンプレート10選
オーダーメイドコース
icon
icon
Webデザイン

簡単にECサイトが完成する！ネットショップ作成でおすすめのテンプレート10選

知識がなくても簡単にECサイト・ネットショップが作成できるおすすめのテンプレートを集めました。Webサイトを作るための技術がなくてもすぐに形になるので、アイデアを持っている人はぜひ試してみてください。

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

ECサイト(ネットショップ)を作成する際におすすめのテンプレートをまとめています。

最近では無料でもおしゃれなテンプレートが増えてきているので、サイト作成にぜひ役立ててみてください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

easy myShop

html13_05

ネットショップを開業できるサービスの中の一つであるeasy myShopです。

レスポンシブをファーストとしたデザインで作られているので、今の時代にあっているテンプレートと言えるでしょう。

easy myShop

 

CARTSTAR

性別でデザインを変えたり、購入回数で表示を変えるなど細かい接客が実現できるネットショップテンプレートです。

レスポンシブ対応もしているので、SEO対策にもなります。

メルマガの配信やサイト上でクーポンのポップアップを表示するなどもできるので、かなり本格的なECサイトを作ることができるでしょう。

CARTSTAR

 

[PR] Webデザインで副業する方法とは

ShopServe

html13_02

ShopServeはテンプレート業界の中でも長い歴史のあるテンプレートです。

そのため、それまでのノウハウが詰まったクオリティの高いテンプレートとなっています。テンプレートだけではなく、システムも内蔵しているため、HTMLの知識があればネットショップを開業することができます。

ShopServe

 

Wix(AudioShop)

html13_03

上で紹介したセレクトショップテンプレートとは違い、シックな印象のショップテンプレートです。

商品数が少ないショップにおすすめのテンプレートです。

Wix(AudioShop)

 

BASE

html13_04

最近伸びてきている、ネットショップを簡単に開業できるサービスです。

豊富なテンプレートから用途にあったテンプレートを選ぶことができ、課金をすることでカスタマイズを行うこともできます。

BASE

 

Wix(呉服店)

html13_06

Wixを利用すればこのような和のデザインのネットショップも簡単に作成することができます。

Wix(呉服店)

 

Goodsie(グッジー)

html13_07

ネットショップ開業代行サービスのGoodsieです。

プロのデザイナーが作成したデザインの中から好きなものを選び、好きにカスタマイズすることができます。

Goodsie(グッジー)

 

Strikingly

html13_08

 

多くの起業家なども使用しているサービスがStrikinglyです。

直接パーツを配置できる簡単なエディタが実装されており、HTMLの知識が乏しくても簡単に編集することができます。

Strikingly

 

Jimdo

html13_09

豊富なデザインテンプレートから自分のページを作成するWebサービスがJimdoです。

元々ネットショップには対応していませんでしたが、対応後はどんどん利用されているサービスです。

Jimdo

 

ペライチ

html13_10

ネットショップ開業にあたりLP(ランディングページ)を作成したいとなった時にオススメなのがこのサイトです。

ペライチと言う名前通り、一ページの商品説明ページを作成するのに適した、サービスです。

ペライチ

 

以上、ネットショップ作成に便利なおすすめテンプレートをまとめました。

ぜひ参考にしてみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

記事を検索

関連するキーワード

関連する記事

毎月チェックしたい！Webデザインのおすすめ雑誌まとめ

Webデザインは実際のデザインと同じように、日によってどんどんトレンドが変わっていきます。トレンドに沿ったデザインをできるというのはデザイナーにとって大きなメリ...
Webデザイン

【今すぐ知っておきたい！】Webデザイナーの転職に必要なスキルとは

IT関連の職種で「Webデザイナー」という言葉を耳にしたことがある人は多いでしょう。 プログラミングやWebマネジメントなどIT関連の専門職は多様化し、増...
Webデザイン

【入門編！】Webデザインをする上で役立つツールまとめ

Webサイトをゼロからデザインするのはなかなか大変なことです。配色やレイアウト、使用するフォントや画像など考えなければならないことがたくさんあります。 そ...
Webデザイン

いざという時に便利！無料で使えるロゴジェネレーター10選

今回は無料で使えるロゴジェネレーターを紹介しています。 ロゴはそのものを表す上で有益なものです。 下手をすればあなたの顔や会社の顔にも成り得るロゴで...
Webデザイン

【Webデザインの参考に！】海外のおしゃれサイトをまとめてみた！

日本でデザインをしていても流行りのデザインなどは、海外から影響を受けることがよくあります。サイトのデザイン面は見る人にとって第一印象になります。 そこで今...
Webデザイン

HTMLで複数のチェックボックスを横並びに配置する方法を現役エンジニアが解説【初心者向け】

HTMLで複数のチェックボックスを横並びに配置する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

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

すぐに使いたい！レスポンシブWebデザイン対応のHTMLテンプレート30選

スマートフォンやタブレットの普及に伴って、Webサイトを多デバイスに対応することが増えてきました。   その1つの解決策として、「レスポンシブWebデザイン」が多く使われています。 レスポンシブWebデザインとは、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる手法です。スマホからアクセスしても見やすく表示されます。 自分でデザインするためには、まずCSSの書き方などを理解する必要があります。   そこで今回は、レスポンシブWebデザインに対応した無料（フリー）のHTML/CSSテンプレートを配布しているサイトを集めてみました。海外サイトも多いですが、全てのテンプレートで日本語の表示が可能か（文字化けしないか）を確認済みです。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   目次 汎用系 ポートフォリオ系 LP（ランディングページ）用   汎用系 無料ホームページテンプレート.com シンプルでわかりやすいのが特徴の日本語テンプレート配布サイトです。 スタイルシート内のコメント・説明は日本語のため編集しやすく、テンプレートを利用してのサイト作成の入門としても使えます。   なお、テンプレートは無料で使用できますが、一番下にクレジットが入ります。 あとでシリアルキーを購入することによって解除することも可能です。 無料ホームページテンプレート.com   Brushed 上のメニューを選択すると該当のコンテンツにスクロールする、1ページ完結タイプのデザインです。コンテンツのソート機能が素晴らしく、スムーズにかっこよく抽出してくれます。 かなりの高機能のため一見難しそうですが、設置までの手順などがとても丁寧に説明されているので安心です。 Brushed   Orion 事前登録サイトにしてはもったいないくらいおしゃれなテンプレートです。 パララックスで奥行きがあり、トップに大きく画像をスライドショーで表示できるので印象に残るサイトになるはずです。 残り時間も自由に表示できるので、キャンペーンサイトとしても役立てられるはずです。 Orion   Enzyme フリーとは思えないほど充実した内容のテンプレートです。 コンテンツの多い本格的なビジネス系サイトを作りたい方などにおすすめです。 Enzyme   Nantes こちらは、企業のコーポレートサイトを作る上で相性の良いテンプレートになるでしょう。 ワンスクロールで、会社概要や運営しているサービス、会社の中の人を掲載できるようになっています。海外のコーポレートサイトではよく見るレイアウトになっているので、ぜひ参考にしてみてください。 Nantes   Bow トップのグラデーションが非常に印象的なテンプレートです。 自社製品をより強くPRしたい時に使えそうなイメージです。 Bow   Fornax シンプルでフラットなデザインの、おしゃれなテンプレートです。 必要な機能も一通り揃っていて、可愛くて使いやすいアイコンやボタンも付いています。 Fornax   Elate マウスオーバーした時のホバーや、スクロール時のアニメーションなど多彩の動きを表現したテンプレートになっています。 海外では多くの人がダウンロードしているようで非常に人気なのでしょう。 自分でコーディングをしたら時間のかかるアニメーションが多いですが、テンプレートを使うことですぐに形にできるはずです。 Elate   Stanley ファイルの構成もわかりやすいため、カスタマイズにも便利なテンプレートです。でき上がったサイトもシンプルなので動作も軽快になっています。 配布元のサイトで設置の方法が丁寧に説明してあります。 Stanley   Obscura Pinterest（写真や動画などのコンテンツをピンボードでとめたようなスタイルのSNS）風のテンプレート。半透明を使った幻想的なデザインが特徴です。 こちらは個人使用でのみのフリーテンプレートなので注意しましょう。 Obscura   Hold 黒の背景に白の文字と非常にシンプルな印象を与えるテンプレートです。 このテンプレートの大きな特徴として、黒の背景・白の文字を切り替えることができるのです。切り替えると白の背景に黒の文字となります。 サイト内でこういった遊び心があると、よりユーザーも楽しんでサイトを回遊できそうですね。 Hold   Type & Grids 記事をクリックして選択すると、ページ移動やポップアップではなく、その場でスムーズに展開して詳細が見られるテンプレートです。 どのように動くのかはデモサイトで試してみてください。 Type & Grids   Narrow Bootstrap3フレームワークを使用した、メンテナンス性の良いテンプレートです。jQueryを使用したスケジュール、CSSアニメーションなどの機能があります。 Narrow   Beam こちらもBootstrapフレームワークを使用したテンプレートです。フルスクリーンイメージが特徴です。 Beam   Magazine Magazineというタイトルのテンプレートだけあって、雑誌をイメージさせるようなサイトを作ることができそうです。 白を基調として情報は少なく、写真を大きく表示しているのでスタイリッシュな作りになるでしょう。 個人や会社のブログなどブランディング重視なサイトを作る上で役立つはずです。 Magazine   Fitness こちらは、Fitnessという名前のとおり、フィットネス系のサイトに向いたテンプレートです。 フィットネスの各種コースのスケジュール表や、トレーナーを紹介するページ、お問い合わせページなど、フィットネス系サイトを立ち上げるのに必要なテンプレートがひととおり揃っています。 Fitness   [PR] Webデザインで副業する方法とはポートフォリオ系 ASTRAL ポートフォリオサイトを作りたい！という方におすすめしたいテンプレートです。 作品を展示するページ、問い合わせを受け付けるページなどが必要最低限におさまっています。 ASTRAL   Personal 個人のポートフォリオサイトとして利用できるテンプレートです。 自分のプロフィール、経歴、スキルなど情報量は少なく1ページで発信することができるので、一つ作っておくと良いでしょう。 Personal   Small こちらもASTRAL同様、ポートフォリオサイトに適したデザインです。 ASTRALが女性らしいデザインなのに対し、こちらはクールな雰囲気になっています。 Small   Dsign 個人のポートフォリオとして、企業のブログサイトとして使えるテンプレートです。 各記事や作品をグリッドで掲載できるので、自分で作ったものが多ければ多いほど見栄えが良く映るでしょう。 ブログ記事を掲載するだけでもまた見に来ようと思ってもらえるはずです。 Dsign   Synthetica 気持ち良いアニメーションが特徴のテンプレートです。sketchファイルも入っているので、デザインの編集を行うことができます。個人的なポートフォリオの他、自社の商品紹介、動画紹介にも使えるでしょう。 Synthetica   BOX ギャラリーのように並べた写真が特徴のテンプレートです。サブページでそれぞれの情報を記載できるテンプレートがあります。個人のポートフォリオ用として、デザインや作品の紹介に向いているでしょう。 BOX   verum 職務経歴や、自分のスキルをグラフィカルに紹介できるテンプレート。エンジニアのポートフォリオとして使うと面白いかもしれませんね。 verum   LP（ランディングページ）用 Valet ランディングページ用のテンプレートとして使えるでしょう。 ファーストビューの水色が爽やかな印象を与えて、自社製品の紹介もポジティブに映るはずです。 自社製品の紹介、製品の特徴、顧客の声などを掲載することができるので、ランディングページとしては十分利用できるかと思います。 Valet   Ranger アプリの紹介や自社サービスのランディングページとして活用することができるでしょう。 スクロールに合わせて浮かび上がったり、横からふわっと表示されたり動きの多いサイトです。こういったモダンなサイトを作りたいという人にはおすすめです。   Landing Page こちらもビジネス感のある大人っぽいデザインです。 Enzymeと比べるとシンプルなサイトになります。 Landing Page   Simple パララックス効果を取り入れた、フルスクリーンでイメージを展開するテンプレート。 シンプルなランディングページ用のテンプレートです。 Simple   New Providence HTML+PSD Freebie   New Providenceは、バランスの取れたタイポグラフィ、高品質のiPhoneモックアップが特徴のランディングページ向けテンプレートです。 New Providence HTML+PSD Freebie   Stellar 固定ナビゲーションと、美しいグラデーションの背景が特徴の、ランディングページ向けテンプレート。 Stellar   Snow アニメーションなどの視覚効果も必要最小限な、とってもシンプルなランディングページ向けテンプレート。 Snow   Elevate テキストアニメーションや、画面を二分割したデザインが特徴の派手系ランディングページ向けテンプレート。 Elevate   いかがでしたか。 無料とは思えないほどクオリティの高いテンプレートが多く出てきています。自分でゼロから作るのは大変だという人は、ぜひ参考にしましょう。 また、WordPressでサイトを制作したい場合は、レスポンシブWebデザイン対応のWordPress無料テーマの記事も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。レスポンシブWebデザインも学ぶことができます。
CSS

過去160年間の情報技術の歴史から見る！インターネットの変遷とは

本稿は、FreeCodeCampのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、プログラミングの指導をしているQuincy Larson氏によって投稿されました。   歴史は繰り返している 今日までインターネットは、過去160年間に他の情報技術に起こったものと同様の悲劇をたどってきています。 電報 電話 映画 ラジオ テレビ これらはそれぞれ、おおよそ同じ物語を持っています。 発明者が技術を発見する。 愛好家がその技術の使用方法を開拓し、一般の人に広く行き渡るようになる。 企業が目をつける。技術を商業化し、洗練し、規模を大きくする。 企業が充分に力を持つようになると、技術を守るため政府を騙し支援させる。自分達を「自然独占企業」として位置づける。 長い停滞のあと、その古い技術を崩壊させる新しい技術が登場する。古い独占を除去するときもあるが、独占をますます強固にするだけの場合もある。 このループは何度も繰り返されてきました。「ネットワーク中立性」という言葉を作ったハーバード大学法学部教授のティム・ウーは、これを「サイクル」と名付けました。 「歴史は、情報技術の発展の特徴を示しています。誰かの趣味から、誰かの産業へ。自由にアクセスできるチャンネルから、企業・政治集団によって厳密に制御されたものへ。オープンなシステムからクローズドなシステムへ。」――ティム・ウー 我々は今、ステップ4の部分にいます。そしてステップ5が見えてきません。 1900年代の始めに経済学者のヨーゼフ・シュンペーターが述べた創造的破壊は実現していません。 インターネットは特別なように見えます。電報・電話・ラジオ・映画・テレビに取って代わる究極の情報技術であり、それを破壊する明確な方法がありません。 しかしインターネットの最高の地位をめぐる争いは終わりません。このグローバルチェス盤にはたくさんのプレイヤーがいます。政府、テレコムの独占、GoogleやFacebookのような大手インターネット会社、NGO、スタートアップ企業、ハッカー。   パート1では、オープンインターネットが何であるかを探ります。そしてそれまでの情報技術の歴史を掘り下げましょう。 パート2では、原子について説明します。インターネットの物理的なインフラ。インターネットのバックボーン。通信衛星。広帯域インターネットをもたらす銅線および光ファイバーケーブルの「ラストマイル」。 パート3では、ビットについて説明します。インターネットのオープンで分散した性質と、それがどのように多国籍企業によって壁に囲まれた庭に封鎖されるか。   パート1：オープンインターネットとは何か オープンインターネットを表す言葉はひとつだけです：カオス オープンインターネットは、お互いに叫び合う30億の声の不協和音です。埃だらけの広大な市場であり乱雑です。しかしそれによって我々の時代における偉大な芸術や産業をいくつか作り出しました。 オープンインターネットは誰でもコンテンツを公開できるツールであり、誰でもそれを利用することができます。   私たちはみんな「サイクル」に閉じ込められている ここではインターネットより前の情報技術についての簡単な歴史と、企業と政府がどのようにして地位を固めたかについて説明します。 最初はある人がケーブルを繋ぎ、モールスコードのメッセージを友達に伝え始めました。電報は実用的なアプリケーションを備えた楽しいツールでした。地元の企業がその周りに現れました。 1851年、ウェスタン・ユニオンが大陸横断線を張り、それらの間に中継ぎ局を建設したときに変化が起きます。 小さな電信会社が競争に参加したい場合はウェスタン・ユニオンのネットワークにアクセスする必要がありました。間もなく彼らは完全に搾り取られてしまいました。 ウェスタン・ユニオンは非常に強力で、アメリカの大統領を単独で任命することすらできました。アメリカで育った人はこの大統領の名前を子どものときに記憶したかもしれません。 ウェスタン・ユニオンはヘイズの選挙活動を財政的に支援しただけでなく、諜報活動の情報のバックボーンとして独自の地位を利用しました。 ウェスタン・ユニオンの支配権と独占価格は、アレクサンダー・グラハム・ベルが電話を発明し電報の事業を崩壊させるまで続きます。   電話がどのように「サイクル」の犠牲になったか JPモルガンの支援を受けた電話会社AT&Tは、アメリカ全土に長距離電話網を構築しました。 地元の電話会社の顧客が他の都市の人に電話する場合、AT&Tに支払いをする必要がありました。 アメリカの電話システムを完全にコントロールすることが、面倒で無駄な資本主義を避ける最善の方法だとテオドール・ベイルは考えました。ベイルは自分のやり方が消費者のためであると主張しました。公平を期すためだと。少なくとも短絡的にはそうでした。 ベイルはAT&Tの独占的利益を利用して、地方の電話回線の開設を助成しました。こうしてアメリカ全体がひとつの標準化されたシステムの下で統一することができました。   しかし慈悲深い独占企業の問題は、その者たちが永遠には生きていないということです。いつかは第二世代のCEOに取って代わられる。その人物は前任者のような理想に欠けている場合が多く、そこには資本家の特権しかありません。利益を上げ、配当金をまき散らし、四半期ごとの業績見通しをたたき出す。つまり顧客からより多くのお金を得るということです。 AT&Tは競合他社を圧倒しました。その独占が明らかになり、アメリカ政府はそれを規制する措置を取りました。しかしAT&Tは規制当局よりもはるかに機敏であり、国の後押しする「自然独占」となる機会に飛びつきました。 AT&Tは1982年にFCCによって解体されるまで何十年も独占的利益を得ることになります。「ベビー・ベルズ」は1977年、分割前よりもさらに大きな企業に合併しました。 AT&Tは政府支部のように機能し、大規模な研究所を持っていましたが、ひとつの主要な例外を除いて、その主要なビジネスにとって脅威となる発明を秘密にすることができました。   コンピュータの重要なデータ記憶媒体として後に使用されたボイスメールとデジタルテープは、実は1934年にAT&Tの研究所で発明されていました。しかしそれは覆い隠され、数十年後に再発明されることになります。 そのような信頼性の高い大量のデータ記憶媒体があったら、その期間内に情報技術の分野がどれくらい発達したでしょうか。 仮に企業が意図的に電子メールの導入を10年遅らせたらと考えてみてください。社会の生産性にどれぐらい影響があるでしょうか。何千億ドルの経済損失になるでしょうか。これは公共の研究室や大学でなく、民間の企業に科学的な研究開発を任せるということについての訓話です。   映画がどのように「サイクル」の犠牲になったか 映画が発明され、皆が米国の何千もの映画館であらゆる種類の映画を鑑賞しました。誰でも映画を制作し、地元の劇場で上映することができました。 アドルフ・ズーカーがパラマウント・ピクチャーズを設立し、またそこで変化が起こります。 ズーカーはブロックブッキングの慣行を開拓しました。小規模な独立した劇場が、例えば最新のメイ・ウェストの映画を上映したい場合は他の貸し映画も購入して上映する必要があります。 これにより、地元劇場所有者の流行先駆けとしての地位は失われました。そして映画劇場の商品化が進み、最終的に大ヒット映画が登場することになります。   どのようにラジオが「サイクル」の犠牲になったか マルコーニやテスラがラジオを発明し、大規模なムーブメントが愛好家によって起こり、アマチュア番組を流す数千の地方ラジオ局が存在しました。 ラジオ・コーポレーション・オブ・アメリカ(RCA)の責任者を務めたデビッド・サーノフ。おそらく20世紀で一番マキャベリなCEOです。 当時RCAは、ラジオ用の部品を作っていました。最初RCAはハードウェアに焦点を当て、多くのラジオ局を稼働させて家庭にも普及させることを目的としていました。しかしサーノフは、 ラジオのコンテンツにこそ本当の富があることに気付きました。サーノフはNBC放送の普及を援助し、その代わりに広告を通してお金を稼ぐようになります。   その後サーノフは連邦通信委員会(FCC)に近づき、電波スペクトルが希少な商品であるためライセンスを発行するべきだとしました。 すぐにNBC放送は全ての家庭で利用できるようになり、地元の愛好家たちによるラジオ局は存続できなくなりました。RCAはラジオ局・家庭用ラジオ部門・放送されるコンテンツと垂直統合されました。 サーノフはテレビの発明家と話していたため、すでにテレビがラジオに取って代わることを知っていました。しかしサーノフには計画がありました。自分自身によってテレビの発明を主張することです。   テレビはどのように犠牲になったか テレビが他の技術と違う点は、「愛好家による段階」が無かったことです。サーノフとRCAは、FCCの助けを借りてすぐにテレビ技術をロックダウンしました。その結果アメリカ人はNBC・CBS・ABCの3つからチャンネルを選ぶことになります。 テレビは大衆文化の最高峰でした。アメリカ人の約半数がみんな同時に、「アイ・ラブ・ルーシー」の同じエピソードを見ているのです。 この独占によって引き起こされた番組の多様性の欠如と相まって、テレビの人気は社会的・政治的な結果をもたらし今に至ります。   パート2：原子戦争 「高度に発達した科学は魔法と区別が付かない」――アーサー・C・クラーク 無垢な抽象概念の領域として考えるほど、インターネットは物理的な構造を持っています。それは決して魔法ではありません。 インターネットは地面と海底トンネルに設置された一連の銅線と光ファイバーのケーブルです。これをインターネットバックボーンといいます。以下はその外観です。 そこからインターネットは地域のバックボーンを通じてさらに配給されます。米国のインターネットデータを伝送するすべてのファイバーです。赤い四角は「長距離」ファイバーの接合部を表します。   インターネットの影の功労者：バックボーンプロバイダ 6つの大手企業がバックボーンを制御し、お金を交換することなくお互いにトラフィックを「手渡して」います。 レベル3コミュニケーションズ テリア・ソネラ NTT Cogent GTT TATA Communications 米国内ではベライゾンやAT&Tなどの長距離通信事業者によって制御されています。これらは米国の二千億ドル規模のワイヤレス業界の2/3を取り締まっています。 巨大な通信会社の関与にもかかわらず、インターネットのバックボーンはかなり健全な市場となっています。インターネットバックボーンの約40％は、聞いたことのないような小さなネットワークによって制御されています。   インターネットのマフィア：ISP(インターネットサービスプロバイダ) 一方、ブロードバンドインターネット市場はまったく健全ではありません。これはインターネットバックボーンに接続するケーブルの「ラストワンマイル」です。 ブロードバンドインターネット市場は、非常に強力な、そしてとても嫌われている3つのインターネットサービスプロバイダ(ISP)によって支配されています。 Cox チャーター(最近他のISPであるタイム・ワーナーを買収した) 全米で最も嫌われる企業コムキャスト(アメリカのブロードバンドの56％を支配している) ISPのもうひとつの形式は、ワイヤレスプロバイダです。 AT&T Verizon(元AT&Tの一部) この2つのプロバイダは、無線市場の2/3を占めています。携帯電話を持っているユーザーは毎月これらの会社のどちらかひとつにデータプランを支払うことになります。 これらのISPは、1970年代に埋められていた数百万マイルの銅線と1990年代に軌道に載った衛生を支配しています。 プロバイダは絶えず法律を破り、長期に渡る裁判で規制当局を停滞させ、例え相手がGoogleであったとしても自分達の市場に参入することを事実上不可能にします。 自由市場競争と、それが必要とする高価な技術のアップグレードを避けるのがISPの目的です。   ネットワーク中立性の仕組み ISPはケーブルパッケージで大金を得ていました。しかし利用者はインターネットを使うようになり、ケーブルテレビをもう必要としないことに気付きます。データプランだけでYouTubeやNetflixだけでなく、たくさんのオンデマンドコンテンツも楽しむことができるからです。 ISPの目標はインターネットを「チャンネル」と「バンドル」にして、それらを買うように強制することによって「古き良き時代」に戻ることです。 これをどうやって防ぐかという方法を、我々はすでに持っています。2015年に、FCCは公益法人としてISPを規制する法律を可決しました。これは、ネットワークを通過するすべての情報は同等に扱われるべきであるという「ネットワーク中立性」の原則に基づいています。 FCCはこの話題に関するアンケートを実施し、300万人のアメリカ人が回答しました。その結果、ネットワーク中立性に反対したのは全体の1％未満でした。 通信会社との厳しい戦いの後、我々はFCCにネットワーク中立性を法律化するように説得しました。 FCCのTitle II規定は、ISPが次のことを行うことを防ぐ3つの「明確なライン」を作りました。 Webサイトからのコンテンツのブロック Webサイトからのコンテンツの遅延 コンテンツのスピードを上げるためにWebサイト側から資金を得ること このルールは企業側がいかに強大であっても、インターネットへの優先アクセス権を買うことができないようにするためのものです。 誰もが平等な条件で競い合う必要があります。どんなハイテク企業でもスタートアップ企業や個人のビジネス、自分のドメインでWordPressを運営している独立したブロガーと競争しなければなりません。   現在ISPはユーティリティのように扱われています。パケットは配管を流れる水や送電網を通じる電気とどう違うでしょうか。 水道会社は、利用者が食器を洗ったりシャワーを浴びたりするたびに蛇口をひねっているかどうか気にするべきではありません。 電力会社は、利用者がテレビやトースターをコンセントに繋いでいるか気にするべきではありません。 ISPは、利用者がどんなデータを望み何に使うかということを気にするべきではないのです。   ISPネットワーク中立性を排除しようとする理由は簡単です。中立性が取り扱われなくなれば、プロバイダがより多くの料金を請求することができるからです。 AT&Tの元CEOが悪巧みをしています。 「彼らがやろうとしていることは、私のパイプを無料で使うことです。私はこれまで資金を費やしており、それによって利益を得なければいけないのですから無料で利用させるわけにはいきません。なので、パイプを使用する人がその分の料金を支払うメカニズムが必要になります。みんなが私のパイプを使用できるのは、私たちとケーブル会社が投資を行っているからであり、無料というのはおかしいのです。」――Edward Whitacre：AT&T CEO この人が理解しないといけないのは、誰もがすでにインターネットにアクセスするための料金を支払っているということです。たとえばあなたは、この記事が読める状態のために何らかの支払いを行っています。私もこの記事をインターネットに出すために支払いをしている。このWebサイトもサーバーからあなたのコンピュータにトラフィックを送信するために支払いをしています。 我々はすでにISPの最後のケーブルを使用するための料金を支払っています。無料で使用している人はいません。 それなのにISPは稼ぎを二重にする機会を見出しています。通信速度のための料金を請求し、マフィアが「みかじめ料」と呼ぶものをWebサイトに請求しようとしています。 もちろん、オープンインターネットを利用している人のほとんどはISPにこの「みかじめ料」を払う余裕がなかったので、ISPはWebサイトへのトラフィックをブロックし、オープンインターネットの大部分から利用者を切り離しました。ISPはWebサイトをブロックする必要はありません。わずかな遅延行為を行えばいいのです。 GoogleとMicrosoftの調査によって、250ミリ秒でさえWebサイトを遅くするとほとんどの人がそのサイトを見るのをやめてしまうことが明らかになっています。 スピードは機能ではなく、利用者を引きつけるための基本的な前提条件だったのです。 つまりこれはISPが人為的にWebサイトを減速させると、実際にサイトを完全にブロックするほどの損害を与えることを意味します。結果として同じ状態、つまりトラフィックの重大な損失となります。 トラフィックはWebサイトの生命線です。それがなければ商品を売ることができず、サービスには出資されず、広告は表示されません。 ISPがブロックしなくても、トラフィックがなければオープンなWebは死んでしまいます。   ISPがネットワーク中立性に全面的な攻撃を開始 1月の米政権の変更と第45代大統領の選挙で、FCCにも変化が起こりました。 元ベライゾンの弁護士であったアジット・パイ会長(FCC)は、現在規制当局を管理しています。彼の言葉です。 「投資や技術革新、雇用の創出を抑制している不要な規制はなくすべきである」――FCC会長アジット・パイ ISPは、インフラに利用者からの「みかじめ料」を再投資せず、すでに信じられないほどの独占利益を持っています。2016年の純利益(税引き後の利益)は次の通りです。 AT&T：160億ドル Verizon：130億ドル コムキャスト：80億ドル チャーター：80億ドル ISPはインフラの改善に踏み出す分の充分な利益があるにもかかわらず、その資金を株主にまき散らしています。 2ヶ月でパイ会長はすでにネットワーク中立性に対して信じられないほどのダメージを与えています。パイ氏はネットワーク中立性の法律に明確に違反していた4つの独占企業に対しての「ゼロ・レーティング訴訟」を取り下げました。 現在コムキャストとAT&Tは顧客がデータ上限を気にせず利用できる独自のビデオサービスを続けており、FCCもそれについて何もしない状態です。 元FCCのトム・ウィーラー会長はパイ会長に働きかけ、ネットワーク中立性の大切さを理解してもらうよう最善を尽くしました。両者は18ヶ月のうち2週間ごとに1度会う予定をしていましたが、パイ氏はこれらの会議をことごとくキャンセルしました。 オープンネットワークは必要であり、将来に不可欠なものです。――FCC元会長トム・ウィーラー   [PR] Webデザインで副業する方法とはパート3：ビット戦争 次のインターネット中立性はどのようになるでしょうか。Apple社のApp Storeだけを見てみましょう。 2016年には200万のアプリがストアにあり、合計で280億ドルを拠出しました。Apple社はそれぞれの売上から30％の手数料を取り、App Storeだけで84億ドルの利益を得ています。 残りの200億ドルのほとんどは、ほんの一握りの携帯ゲーム会社の手に渡っています。 iPhoneユーザーのほとんどが、月にダウンロードするアプリの数がゼロであることが分かっています。 そして、アプリストアの上位8つのアプリは、FacebookとGoogleという二つの企業だけが所有しています。 残りの200万のアプリの大半はトラフィックがほとんどなく、少ない金額しか得ていません。 App Storeは平等なフィールドではありません。その上に構築されたオープンインターネットとは別のものであり、壁に囲まれた庭のひとつの例です。 塀の中の庭園は美しく見えます。最も人気のある植物の生息地だからです。しかしそこから壁の外に自由に冒険することはできません。 壁の中の庭にはゲートキーパーがいて、雑草のような植物は根絶やしにします。その庭に何かを植えたいときはそのゲートキーパーから承認を得る必要があります。 Appleはとても攻撃的なゲートキーパーであり、自社の利益と競合するアプリを排除し、企業の世界観と合わないアプリを検閲します。   壁に囲まれた庭の簡単な歴史 まず最初に、AOLという庭園がありました。 20年経ち、AOLは今でも20万人のユーザーを持ち月額20ドルの支払いを受けています。壁に囲まれた庭の中にユーザーを閉じ込めるためにはたくさんのお金が必要です。 そののち壁に囲まれていなかったYahooが現れますが、これもまた同じ道を歩みます。人々はまだインターネットに慣れていませんでした。 90年代後半、スタートアップ企業はYahooでバナー広告を購入できるように資金を調達しました。これは将来のユーザーにアプローチする一番いい方法でした。 地球上の人々の4分の1は、毎日平均50分間Facebookを利用しています。 マーク・ザッカーバーグの自慢のinternet.orgには、五千万人の人が接続しているでしょうか。発展途上国の人々がオープンインターネットに料金を支払うか、無料でFacebookを使うか。そして、みんなFacebookを選択しました。 インドではオープンインターネットの代わりにFacebookを使うことによってinternet.orgが拒絶されました。 マーク・ザッカーバーグ自身に悪意はありません。ただオープンインターネットは急速に破壊されています。Facebookのマーケットシェアを拡大する中で高度な検閲ツールを構築するだけでなく、政府を鎮めることすらできます。 Facebookは、こうした閉ざされたソース・閉ざされたデータの庭園で利益を得ようとしている他のインターネット企業のひとつに過ぎません。 世界時価総額トップ10の企業です。 Apple Alphabet(グーグル) Microsoft エクソンモービル ジョンソン＆ジョンソン ゼネラル・エレクトリック Amazon.com Facebook ウェルズ・ファーゴ AT&T すべてアメリカに本拠地を置く多国籍企業です。そのうち6つはインターネット企業であり、1つはISPです。 これらは石油会社や銀行と同じような新しい体制です。彼らは情報を制御し、会話を制御し、政治を支配します。現に本人とそのアドバイザーも認めていることですが、Facebookは大統領の当選に影響しています。 Webサイトを立ち上げるためにかかるコストが低下しても、顧客を得るコストは依然上昇しています。 FacebookとGoogleは、オンライン広告費の伸びの85％を占めています。この二つの企業の口から落ちたパンくずのために、新聞・ブログ・ビデオネットワークなどすべての人が争っているのです。 すべてのインターネットトラフィックの半分は、わずか30のWebサイトからのものです。残りの半分はGoogleがインデックスしている60兆のWebページに薄く広がっています。 ロングテールの概念を知っていると、この現象は太った頭にとても長くて細いしっぽが付いた状態だと分かります。   私たちは技術の創始者を、慈善を行っている人だと盲目的に信じている あなたは世界のマーク・ザッカーバーグやラリー・ペイジがその力を悪用するとは思わないでしょう。 Redditは大人気Webサイトのひとつです。その創業者の一人がユーザーのコメントを書き換えていたことが判明し、会社の評判が危機に陥ったことがあります。 私たちは一握りのエリート創業者だけでなく、その組織を引き継いだ人たちも善意的であって欲しいと信じています。株主や政府が悪意を持ってユーザーに反する行為を強制することがあったとしてもです。 20世紀始めにAT&Tの地方アクセスを援助した「慈悲深い独占」のテオドール・ベイルのように、マーク・ザッカーバーグもいつかは引退するでしょう。そして、Facebookを引き継ぐ人物は彼のように前向きではなく、Facebookのユーザーとクライアントに商売を行うだけのセールスマンかもしれません。   将来、我々のインターネットは中国のようにロックダウンされるかもしれない 中国は世界で最も高性能な検閲ツールを持っています。 14億人の中国人は、グレート・ファイアウォール内のクローズなインターネットの中に閉じ込められています。 すべてのパケットの内容を調べずにISPがどのパケットを減速させるかを決めることはできません。これはプロバイダがデータを送信するだけでなく、パケットの中身を実際調べることになるということを意味します。   実際過去に、AT&Tは何年間もトラフィックを違法に監視していたことがありました。 このようにインターネットのトラフィックを監視することで、閲覧という行為を行き渡らせることができます。これは中国が歴史を書き換えるときに使用するときのやり方のひとつです。そして、それは確かに機能します。 「思想は銃よりも強力である。敵に銃を持たせるべきではない。どうしてやつらに思想を持たせてやらねばならないのか。」――ヨシフ・スターリン ISPが成功し、オープンインターネットが崩壊すれば企業や政府は人類史上最も強力なコミュニケーションツールであるインターネットの検閲官になるでしょう。   TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。 独学で学習してみたけど挫折してしまったなんて経験のある方は、ぜひご覧ください。
プログラミング

業務内容やスキルを紹介！ネットワークエンジニアとは【初心者必見】

ネットワークエンジニアについて解説します。 私達の身の回りにはWi-FiやLTE、光回線など、当たり前のようにインターネットへ接続できる回線が用意されています。そして私達はその回線につなぐだけで、SNSやECサイトなどの様々なインターネット上のサービスを利用することができます。 今やインターネットへ接続する回線や、自宅や会社内でのWi-Fi環境など、コンピューターネットワーク(以下ネットワークと表記します)は私達にとって無くてはならないものになっています。そのネットワークの構築や運用保守を行うのがネットワークエンジニアです。それではネットワークエンジニアはどのような仕事を行っているのでしょうか。   本記事はエンジニア転職を保証するTechAcademy Proの就職実績を元に制作しています。   田島悠介 今回は、キャリアに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ネットワークエンジニアについて詳しく説明していくね！ 大石ゆかり お願いします！   ネットワークエンジニアの仕事内容 ネットワークエンジニアの仕事を紹介する前に、あまり馴染みがないネットワーク関係の用語について整理しましょう。 ネットワーク：複数のコンピューターを接続する技術や接続された全体を指します。ネットワークは共通の通信手段(仕様。プロトコル)で情報をやりとりします。現在ではTCP/IPというプロトコルを使うのが一般的です。 インターネット：世界規模のネットワークです。TCP/IPプロトコルを使っています。 LAN：ローカルエリアネットワークの略称です。インターネットに対して、自宅や会社などの閉じたネットワークのことを指します。私達がインターネットにアクセスする場合は、ほぼ100%LANを経由して行います。 Wi-Fi：PCやスマートフォンなどの電子機器を無線を使ってLANに接続する技術です。 ルーター：異なるネットワーク同士を接続する機器です。例えばLANとインターネットなどを接続します。 ファイアウォール：ネットワークへの不正なアクセスを防ぐ機器です。ルーターと共に使用する場合が多く、インターネットからLANへの不正アクセスを防御します。 サーバー：Webサイトやサービスを提供するコンピューターのことを指します。例えばSNSは、SNSのサービスをサーバーが提供し、私達はネットワークを通じてそのサーバーにアクセスしている、ということになります。 用語の整理ができたところで、ネットワークエンジニアの仕事内容を確認していきましょう。ネットワークエンジニアは、ネットワークの構築や運用保守に関する幅広い仕事を行います。   物理的な配線や機器の設置 上記でご紹介したルーターやファイアウォール、サーバーを光ケーブルやLANケーブルなどの配線で接続してネットワークを構築します。単に接続すれば良いだけではなく、セキュリティを考慮して機器の接続順を決めたり、通信量が分散されるようなネットワークにするなど、経験と専門知識が必要となります。   ネットワーク機器の設定 ルーターやファイアウォールの設定を行い、ネットワーク上で通信が正しく行われるようにします。現在のネットワークはインターネットに接続する場合が多く、外部からの侵入を防ぐためのセキュリティ対策がとても重要となっています。そのため、インフラエンジニアにはネットワークの知識と共に、セキュリティに関する高度な知識も求められます。   サーバーの構築/設定 サーバー機器においてもセキュリティ対策は重要です。そのため、ネットワークエンジニアがサーバーの設定を行う場合も多くあります。ネットワークやサーバーの構築や運用保守を行うエンジニアを総称してインフラエンジニアと呼ぶ場合もあります。 具体的な作業としては、WindowsサーバーやLinuxといったOS(オペレーティングシステム)の初期設定、システムを動かすための設定、データベースやサーバソフトウェアのインストール、運用設定(電源制御、バックアップ)などを行います。物理的なサーバーの設置やネットワークへの接続も担当します。   ネットワークエンジニアの将来性 このように私達に無くてはならないネットワークの構築や運用保守を行うネットワークエンジニアですが、システムエンジニアと比較して目指す方が少ないこともあり、慢性的に人手不足の業界と言われています。 ネットワーク機器やセキュリティに関する知識を身につけるには大変ですが、ネットワークが無くなることは考えられず、とても将来性のある職業と言えるでしょう。   [PR] Webデザインで副業する方法とは必要とされるスキル ネットワークエンジニアやシステムエンジニアなど、IT関係のエンジニアになるには、もちろんITに関する基礎知識が必要です。これはIT関係の資格取得に向け学習することで身につけることができます。 おすすめは、IPA(独立行政法人情報処理推進機構)が実施しているITパスポート試験です。ITを利活用するすべての社会人・学生が備えておくべき基礎的な知識を確認するという位置づけなので、未経験の方にもおすすめです。 さらにネットワークエンジニアには、ネットワークに関する専門知識が要求されます。こちらもIPAが実施している情報処理資格の取得に向け学習することで身につけることができます。はじめに基本情報技術者試験、次に応用情報技術者試験、そしてネットワークスペシャリスト試験というようにステップアップしていくと良いでしょう。特にネットワークスペシャリスト試験は難易度が高く、資格を取得しておくと、一目置かれること間違いありません。 ITパスポート試験 https://techacademy.jp/magazine/wp-content/uploads/2017/07/index.html2_-620×437-e1499391542321.png 基本情報技術者試験 https://www.jitec.ipa.go.jp/1_11seido/fe.html 応用情報技術者試験 https://www.jitec.ipa.go.jp/1_11seido/ap.html ネットワークスペシャリスト試験 https://www.jitec.ipa.go.jp/1_11seido/nw.html 情報処理安全確保支援士(登録セキスペ) https://www.jitec.ipa.go.jp/1_11seido/seido_gaiyo.html この他、サーバOSやネットワーク機器については、以下の資格がおすすめです。 マイクロソフト認定資格プログラム https://www.microsoft.com/ja-jp/learning/default.aspx Linux技術者認定試験 https://linuc.org/about/01.html Cisco技術者認定 https://www.cisco.com/c/ja_jp/training-events/training-certifications/certifications.html   どのような人が向いているか ネットワークエンジニアはシステムエンジニアに対し、比較的体を動かすことが多い職業です。またセキュリティの関係で、実際に機器がある場所に訪問しないと作業出来ない場合も多くあります。そのため、アクティブで体力に自身がある人が向いているでしょう。 もちろん、ルーターやファイアウォール、サーバーなどの設定を行うので、それらの機器を触るのが好きなこともポイントです。パソコンを自作するようなタイプの方は、ネットワークエンジニアにとても向いていると思います。 一転、実際に仕事を進める際は、設定を間違うとセキュリティ事故に繋がりかねないため、慎重な、いわば石橋を叩いて渡るような性格の人が求められます。   エンジニアになるための学習方法 学習サービス Progate プログラミング言語の基本に特化した、オンラインで無料から使用できる学習サービスです。今までプログラミングを学んだことのない人でも始められる各言語のカリキュラムが揃っています。有料会員では実践レベルのものまですべてのコースを受講可能です。 Progateのレポート記事   ドットインストール 動画による学習サービスです。環境構築など、初心者がつまずきやすい部分についても実際の画面を見ながら学習できます。ひとつひとつの動画は3分前後であり、集中して取り組みやすい形式になっています。有料会員では各動画の文字起こしやソースコードの閲覧が可能であり、学習に活かすことができます。 ドットインストールのレポート記事   Schoo 仕事に関係するさまざまな知識やスキルを学ぶことができる、動画と生放送による総合学習サービスです。生放送では講師に質問することもでき、参加しながらライブで勉強できます。有料会員ではすべての録画授業の閲覧・ダウンロードが可能です。 Schoo   スクール エンジニア転職保証コース 現役エンジニアのパーソナルメンターが学習から転職までをサポートするサービスです。オンラインの環境があればどこでも受講可能で、パーソナルメンターにはカリキュラム内で分からないところを質問したり、キャリアについて相談することができます。 未経験からエンジニアを目指したいけれども、何から始めたらいいのか分からないという方におすすめです。 エンジニア転職保証コース   デジタルハリウッド Webやデザイン・CGなどのデジタルコンテンツに関する通学制スクールです。就職・転職だけでなくフリーランスや在宅ワークといったさまざまな形態の働き方へのマッチングサポートも充実しており、在学中から始められる仕事なども紹介されています。 デジタルハリウッド   ヒューマンアカデミー 職業に関する各資格の学習ができる総合スクールになります。学習形態は通学・通信・オンラインから選ぶことができます。 各資格の日程なども公式サイトから一覧できるため、予定を立てて学ぶことができます。 ヒューマンアカデミー   この記事を監修してくれた方 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   また、オンラインのプログラミングスクールTechAcademyではエンジニア転職保証のコースを提供しています。 プログラミング未経験の方でも12週間で東京のIT企業へエンジニアとして転職を目指せるコースです。 現役エンジニアへオンラインで個別に相談できる無料カウンセリングを実施しているので、まずはこちらから試してみてください！
エンジニア転職

字下げする！CSSでインデントする方法【初心者向け】現役Webデザイナーが解説

今回はCSSでインデントする方法を紹介します。 Webサイトの文章を字下げしたいという時に使えるので、覚えておきましょう。 1文字目をインデントする方法、2行目以降の最初の文字をインデントする方法について解説しています。 目次 インデントとは インデントを指定する書き方 実際に書いてみよう 2行目以降を1文字下げる方法 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！！文字列の最初にインデントを入れたいのですが、どのようにスタイルを指定すればいいんでしょうか～？ 田島悠介 そういうときはtext-indentを使うといいよ。 大石ゆかり インデントの長さも指定したいんですが…… 田島悠介 text-indentプロパティでは値でインデントの長さを決めるので、好きな長さにすることができるんだ。 さっそくやってみよう。   インデントとは インデントとは、「1文字下げるもの」のことを言います。 国語の教科書や作文などで、行頭1文字下げることをインデントと言います。 プログラムのソースコードにおけるインデントは、プログラムを読みやすくする効果があります。 Pythonのようにインデントを行うことがプログラミングの文法上決まっているものもあります。 今回の記事で解説するインデントは、そのようなプログラミングを実装する上で利用するインデントとは異なり、表示した際にデザイン上の変化を生むためのインデントになります。   例えばHTMLでWebコンテンツを執筆するときに、読みやすくするため1行目をインデントで字下げしたり、2行目以降の行頭を一括でインデントしたりすることができるようになります。 これにより、Webコンテンツを読みやすくする事が可能です。   【動画でも解説しています。クリックで見る！】   [PR] Webデザインで副業する方法とはインデントを指定する書き方 CSSでインデントを指定する書き方を確認しましょう。 CSSサンプルコード p{ text-indent: 1em; }   「text-indent」は最初の1文字にしか適用されません。 CSS内にある「1em」というのは1文字分を示すので、1文字分のインデントがされます。 1文字分のインデントは最初の1文字にのみ適用されているために、最初の行がインデントされているように見えます。   田島悠介 text-indentの基本の書き方だよ。 大石ゆかり この場合は段落pに、1em分のインデントが付くことになるんですね。 田島悠介 次は実際にインデントを設定して、画面で確認してみよう。   実際に書いてみよう 実際にコードを書いてみましょう。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS インデント</title> <link rel="stylesheet" type="text/css" href="sample.css"> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> </head> <body> <h1>Sample</h1> <p> インデントされます。<br /> インデントされません。
CSS

【未来の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ページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。 または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。   プロトタイピングのツールとアプリ 理論を理解したところで、プロトタイプの作成に進みましょう。紙のプロトタイプやコードだけに限定せず、アプリをどこかで使うと仮定します。 良くも悪くも、多数の優良なアプリから選ぶことになります。 繰り返しになりますが、結局はあなたに合うものを選ぶことが大切です。モバイルアプリのデモを実行する機能が必要か？Google DriveやDropboxなどのサービスとファイルの同期が必要か？Githubと統合させるか？ローファイ、ミディアムファイ、ハイファイのどのタイプか？アドバンストスクリプト言語(Advanced scripting)か？などから考えましょう。 以下にリストアップするアプリは、これらのニーズに対応しています。何に着目すべきか分かりやすいように、アプリごとに最も関連性の高い機能をご紹介します。 これらアプリの多くは主にワイヤーフレームのためのツールとして知られています。ワイヤーフレームのソフトウェアは、インタラクティブなプロトタイプに必要な機能を備えていることが一般的です。人によってこれらのアプリを使うことで得られるアドバンテージも異なります。   AdobeのExperience Design CC 現時点では最新のアプリです。このアプリの登場により、今まで飽和状態だった市場に競争を巻き起こすことになりそうです。単にワイヤーフレームのアプリまたはプロトタイピングのアプリというよりも、デザインアプリです。Sketchや開発終了したFireworksと似ていますが、デザインした全てのものからプロトタイプを作り出すことが可能な点が斬新です。 今のところMacのプレビューにのみ対応していますが、2016年末までにはWindows版もリリースされる予定です。 プレリリース版は無料ですが、完成版のリリース後にはAdobe Creative Cloudのプランに組み込まれます。   プレゼンテーションのソフトウェア MicrosoftのPowerPoint、AppleのKeynote、LibreOfficeのImpress、GoogleのSlidesは全てプロトタイプの作成に使えます。プロトタイプについてのコンセプトはそれぞれ異なっています。スライドにリンク機能を加えるだけで、インタラクティビティを模倣できます。 コンテンツ中心型のWebサイト用のプロトタイプにも向いています。またこの中のソフトの少なくとも1つは使った経験のある人も多いでしょう。もし使ったことがなければ、ImpressとSlidesは無料で使えます。   InVision InVisionも有名なアプリの1つで、ハイファイプロトタイピング向きです。バージョン管理を特色としていて、リアルタイムの連携機能やフィードバック機能を売りとしています。Marvelのアプリのように、アニメーション、プロトタイプの組込み、デバイス上でのデモ、などの機能もあります。 無料プランではプロトタイプ1つまで作成できますが、それ以降は有料プランで月額15USドルかかります。 InVision   Justinmind Justinmindはアプリケーションのハイファイプロトタイプを作成するのに向いているように思えます。JustinmindのサイトではレスポンシブデザインのWebサイトのプロトタイプについても言及されています。アプリ上でのデモ機能もあります。 今のところ1年間の有料契約(月額換算で19USドル)からスタートできます。 Justinmind   Marvel Marvel Appは有名なプロトタイプのアプリです。基本的に無料プランで、アップデートの価格も全てリーズナブルです。注目の機能は、PhotoShipとSketchのサポート、DriveとDropboxとの同期、Webページ上での組込み型プロトタイプです。これらの機能によって、プロトタイプをアニメーション付きのプレゼンテーションに仕上げることもできます。ハイファイプロトタイプの作成に向いています。 Marvel   Proto.io Proto.ioはハイファイプロトタイプ向きのアプリです。複合的なインタラクション、アニメーション、ファイル形式のエクスポート、印刷、組込み、デバイスのデモンストレーションなどの機能が全てビルトインされています。15日の無料お試し期間と、月額24USドルのプランから始められます。 Proto.io   POP POPが他のアプリと異なっているのは、ワイヤーフレームのスケッチとデジタル形式のプロトタイプのハイブリッドを作成できる点です。 iPhone、Androidフォン、Windowsフォンなどのカメラでスケッチの画像を取り込み、これらをインタラクティブなプロトタイプに変換します。 主に紙で作業を進めるタイプの人には、データを共有するのにいいアプリです。プロジェクト2つまでは無料で利用可能で、以降は月額10USドルの有料プランになります。 POP   Flairbuilder Flairbuilderはデスクトップアプリですが、プロジェクトにオンラインのビューア(閲覧用ソフトウェア)機能を利用できます。ミディアムファイのワイヤーフレームとプロトタイプに向いています。インタラクションを追加したり、デバイス上でのデモを行うことが可能で、グリッドベースのデザインにも特色があります。 ワンタイム料金で99USドルと高額ですが、Axureよりも安いです。 Flairbuilder   Flinto Flintoには、Macアプリ版とWeb用ライト版の2つのバージョンがあります。違いはというと、Macのバージョンの方がより複雑なアニメーション、インタラクションなどの機能をテーブル(表)に加えることができます。またSketchからファイル形式をインポートできるのも、Web用ライト版にはない機能です。 ワンタイムの購入価格で99USドルかかります。ライト版(月額20USドル)だとデスクトップバージョンのライセンスも含まれるので、両方の良い部分を利用できます。 Flinto   [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

【業種別！】無料で使える、パワーポイントのテンプレートまとめ

他人とは一味違ったスライドを作りたい プレゼン相手にウケが良さそうなスライドを作りたい そんな方は必見です！ 今回は、それぞれの「業種」に合いそうなPowerPoint(パワーポイント)のテンプレートを、まとめて紹介しています。 しかも、全て「無料」です。 ぜひご覧ください！   なお本記事は、KiRAMEXのオンライン完結のPowerPoint(パワーポイント)講座の内容をもとに紹介しています。   目次 建設・不動産系 IT系 金融・保険系 アパレル・化粧品系 飲食系 旅行・レジャー系 教育系 医療・製薬系   建設・不動産系 Building Plans PowerPoint Template | Free PowerPoint Templates 建物の設計図の写真が載っている、スタイリッシュなテンプレートです。建設系に会うテンプレートで、こんなにかっこいいデザインのもの、なかなかないと思います。 Building Plans PowerPoint Template | Free PowerPoint Templates   Office Building PowerPoint Template | Free PowerPoint Templates 高層ビルを背景にしているテンプレートです。不動産系だけでなく、金融系などにも合いそうですね。 Office Building PowerPoint Template | Free PowerPoint Templates   [PR] Webデザインで副業する方法とはIT系 Computer Blue Template | Presentation Magazine 数字の羅列を背景に、ノートパソコンのイラストが載っているテンプレートです。IT系だと青色が合いますね。 Computer Blue Template | Presentation Magazine   Modern Technology PowerPoint Template | Free PowerPoint Templates 青い背景の中に光る水色の線が走っているテンプレートです。表紙以外の部分はほとんど白なので、意外とシンプルです。 Modern Technology PowerPoint Template | Free PowerPoint Templates   金融・保険系 Architecture PowerPoint Template | Presentation Magazine ガラス張りの高層ビルの写真が載っている写真です。「金融」というと、ビルや青がイメージに合いますね。もちろんこのデザインは、不動産系にも合いますよ。 Architecture PowerPoint Template | Presentation Magazine   1 Euro Coin PowerPoint Template | Free PowerPoint Templates 1ユーロコインの写真を使っているテンプレートです。背景も金色を使っていて、いかにも金融系っぽいですね。 1
PowerPoint

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン 簡単にECサイトが完成する！ネットショップ作成でおすすめのテンプレート10選