TechAcademy（テックアカデミー） パソコン周辺機器 キーボード 【PC初心者必見！】キーボードタイピングの練習ができるサイト5選
icon
icon
キーボード

【PC初心者必見！】キーボードタイピングの練習ができるサイト5選

キーボードタイピング(タッチタイピング・ブラインドタッチ)の練習ができるWebサイトをまとめて紹介。タッチタイピングは、仕事でパソコンを使う方には必要な技術です。PC初心者の方はぜひ、この記事を読んで自分に合うサイトを見つけて、練習してみてください。

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

PCで文字を入力したり、プログラミングを行う際に、タッチタイピング(ブラインドタッチ)の技術があると便利です。
タッチタイピングを練習するためには、ホームポジションやキーに対応した指を、独学ではなく正しく基礎から学ぶとよいでしょう。

今回は、Web上で無料で練習・学習ができるサービスを、5つに厳選して紹介していきます。
なお本記事は、KiRAMEXのオンライン完結のExcel(エクセル)講座の内容をもとに紹介しています。

 

イータイピング

タイピング1

ホームポジションから一文字ずつ指と対応のキーについてレッスンできるタイピング学習サイトです。

完全に最初から始めたい人向けですが、ある程度慣れてきた人でも基礎練習として活用できます。

記号や英語タイピングなどの練習もしっかりしているため、プログラミングをする方にもおすすめです。

イータイピング・マスターという実力技能検定の模擬試験や、一部の本試験を受けることができます。

イータイピング

 

マイタイピング

タイピング2

基礎のタイピング練習ができるほか、自分でタイピングを作成して他のユーザーに公開することができます。

ユニークな内容のものが多いのが特徴ですが、ワープロ検定に特化した練習コースもあります。

タッチタイピングについての解説記事もあり、きちんと学びたいときにも役立ちます。

マイタイピング

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

Easyタイピング

タイピング3

練習する単語のおおよその文字数や何問練習するかなどを、自分で決めることができます。

シンプルな練習用として利用できるでしょう。

Easyタイピング

 

寿司打

タイピング4

有名なタイピングゲームのひとつで、流れてくるお皿が通りすぎてしまう前に表示されている文章をタイプします。

ホームポジションなどの練習機能はなく、ゲーム感覚で楽しく腕試ししたいときにおすすめです。

寿司打

 

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分 を すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

P検無料タイピング

タイピング5

ICTプロフィシエンシー検定試験が公開している無料のタイピング練習です。

オンライン以外にも、ダウンロードして使用することができるバージョンがあります。(Windowsのみ)

基礎的な練習や日本語入力の他に、英語入力の練習コースもあり実践的な内容になっています。

また、無料でP検の4級・3級・準2級・2級の模擬試験や5級の本試験を受けることができます。

P検無料タイピング
以上、インターネット上でタイピングの練習ができるサービスをを5つ紹介しました。

ブラインドタッチは、PC作業の効率を上げるために必要不可欠な技術です。
なのでぜひ、上記の中から自分に合うサイトを見つけて、ブラインドタッチができるように練習をしてみましょう。

[お知らせ]KiRAMEXでは初心者でも最短4週間でExcelが使えるようになるオンライン完結のExcel(エクセル)講座を開催しています。PC作業の効率を上げたいと考えている方はぜひご覧ください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

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

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

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

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

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

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

記事を検索

関連するキーワード

関連する記事

【やってしまった！】PCキーボードに水をこぼしたときの対処法

PC の近くにある飲み物に手を伸ばした、そのとき！ <<<バシャー！>>> 「あっ！？ キーボードにコーヒーこぼしちゃっ...
キーボード

【キーボードを使いこなそう！】便利な"ファンクションキー"とは

皆さん、キーボードを使いこなせてますか？ 「このキーって何のためにあるの？」みたいなものもありますよね。 今回は、使えると効率よく作業をこなせる「ファン...
キーボード

【最低限知っておきたい！】キーボードのショートカット18選（Windows/Mac）

「PC 作業が遅い！」と、言われたことはありませんか。 「いちいちマウス動かしてクリックして…面倒くさいなあ。」と、思ったことはありませんか。 今回は、...
キーボード

【購入前に知っておきたい！】自分に合うPCキーボードの選び方

パソコンを操作する上で最も重要な機器といえば、マウスとともにキーボードがありますよね。 デスクトップＰＣの場合、キーボードが接続されていないと、OSが起動すら...
キーボード

【困った！】PCキーボードのテンキーが使えないときの対処法

数字を入力する時に使う「テンキー」ですが、ちょっとしたミスで使えなくなることがあり、初心者の方は戸惑うことがあります。 この記事では、テンキーが使えなくな...
キーボード

【困った！】いつの間にかローマ字入力が大文字になっていたときの対処法

皆さん、こんな経験はありませんか？ 「あれ、さっきまで普通に小文字でアルファベット入力できてたのに、いきなり大文字になってる… [Shift] も押していない...
キーボード

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

目的を見失わないために！プロトタイピングの間違った手法とは

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はUXPinのUXデザイナーであるMarcin Treder氏によって投稿されました。 プロトタイピングの間違ったやり方は、あなたが思っている以上にUXデザインを損ないます。 そして、プロトタイピングを実行する段階が早すぎることがなぜ危険なのか、私の経験を基に説明します。   急成長するUXデザイン 10年前にはUXデザインは、デジタル製品の開発プロセスの一部で使われているだけでした。それが2000年代以降に広まり始め、今や全ての製品開発においてUXデザインは重要な役割を果たしています。 次のGoogleトレンドによる分析グラフも、UXデザインの急成長を示しています。   リーン開発、アジャイル開発、ウォーターフォールモデル（上流から下流への開発工程）などの数々のシステム開発のタイプの実例を見たところ、多くの会社ではプロジェクトの時間節約のために、プロトタイピングを早すぎる段階で実行していることに気づいたのです。 その結果、短期的にはチームにとって時間節約になるかもしれませんが、長期的には修正や故障が数多く起こるために、かえって時間がかかるのです。 これでは、デザインの間違いを修正する過程で正しいアイデアを見つけるという、UXの真の価値が失われてしまいます。   間違ったプロトタイピングの危険性 私は、プロトタイプはその良さが生かされないまま、いわば現実離れしたおもちゃになりつつあるのではと思っています。 実際にプロトタイピングは、ものを良く見せるためだけに使われることも多くなっています。その結果としてデザインプロセスは、高い費用がかかり、肥大化し、バラバラに分離した、混乱するようなものになってしまうのです。 私が過去に、ビジュアルデザインのバックグラウンドを持つUXデザイナーと一緒に、eコマースのデザインの仕事をしたときに、まさにこの罠に陥っていました。Photoshopに慣れている彼らは、いきなり実際のサービスをイメージしたモックアップからデザインを始めました。 デザインに問題があれば、サービス責任者からフィードバックを受けたり、インタラクションモデル（ターゲットとするユーザーと共同でデザインを考える手法）においてユーザーから問題を指摘されることもあります。 もちろん、実際のサービスに寄せたプロトタイピングから始める方法が役立つこともあるのですが、それをデフォルトにするのは良くありません。 製品のデザインに、PhotoshopやSketchなどを使うのは、デザインプロセスのもっと後の段階でいいのです。 何よりもまず、そもそものプロトタイプの存在意義について考えてみましょう。   [PR] プログラミングで挫折しない学習方法を動画で公開中プロトタイピングの3つのコスト削減効果 プロトタイピングは実は古くからある概念であり、またインタラクションデザインにおける唯一の手法ではありません。 Michael Guggenheim氏の記事『The Long History of Prototypes』によると、 「プロトタイピングは開発における「原型」として理解されるべきものではなく、またインダストリアルデザインにおけるベータ版（サンプル製品のソフトウェア）のようなものでもありません。プロトタイピングは開発を進めるための手法です。つまり、仮のモデルであり、ブリコラージュ（使えるものを何でも利用して作ること）や、ユーザーの参加、製品の修正などの「オープンな革新」を可能とするものです。決して見知らぬユーザーのために、閉鎖的な実験室で完成度の高い製品を作るための手法ではありません。」 プロトタイピングは、ユーザーに製品への最短経路を提供するものであるべきです。プロトタイプは製品開発の初期において、製品のアイデアをそれを受け取る人（顧客）に示すことができます。これこそプロトタイピングの真の価値です。 プロトタイピングを効果的に使うと、次のようなメリットがあります。 製品のアイデアを検証する 製品の詳細を修正する 製品のアイデアを拡張する デザインの検証、修正、拡張をプロトタイピングで実行すれば、製品開発のコストを大幅に削減できます。 またエンドユーザーにプロトタイプを試用してもらう時期が早いほど、後々高いコストがかかるエラーが発生する可能性も低くできます。これこそプロトタイプを初期から作成するべき理由です。 初めに最もコストのかからないプロトタイプを作成し（ファイデリティを柔軟に変更できて、一応使える代物であれば、プロトタイプとしては完璧です！）、ユーザーのフィードバックを受けた後でイテレーション（反復型の短期の開発サイクル）を行えばいいのです。 外観のデザインの完成度を高めるために多くの時間を費やしたり、プロトタイピングで使うためだけにスクリプト言語でアニメーションを作成するとしたら、時間とエネルギーの無駄です。ユーザーに最初に製品を紹介したときに、良く評価されないリスクが高くなります。 多くのケースにおいて、わざわざグラフィックデザインのツールを使って作成したモックアップから、プロトタイプを作るメリットはありません。最初に完成度の高いデザインに陶酔してしまったら、ユーザーに製品のアイデアを検討してもらうのも、製品を改良するのも難しくなるというデメリットがあるだけです。 つまり、イテレーション（反復型の短期の開発サイクル）の精神が失われてしまうのです。 プロトタイプを最大限活用するには、素早く実践し、チームで共同作業を行い、ユーザー調査に基づいてイテレーション（反復型の短期の開発サイクル）を行うべきです。   プロトタイピングが役立つケース しかしながら、モックアップのプロトタイピングが非常に役立つケースも存在します。   既存のアセットを変更するケース 既存のアセットに小さな変更を加えるだけであれば、効率的です。 グラフィックやコードから小さな操作（要素の再配置など）をするだけで十分なので、わざわざデザインし直すメリットはありません。   顧客向けのプレゼンテーションを行うケース グラフィックで作られたプロトタイプは、顧客向けのプレゼンテーションを行う場合に役立ちます。逆に、完成度の低いプロトタイプをプレゼンテーションで使っても、顧客の関心を引くことはできないでしょう。 すでにユーザーに製品を試用してもらっていて、製品の最終的なインターフェースに自信を持てるとしたら、顧客向けに完成度の高いプロトタイプを作成してもいい段階です。 優れたプロトタイプを顧客に示すことで、より契約獲得の可能性が高まると思います。   複雑なプロジェクトのケース 現実世界のシミュレーションをプロトタイプに反映しなければならないような場合を考えてみてください。 このような複雑なプロジェクト（または「重要度」は高いが「緊急度」は低いプロジェクト）では、現実の変動するデータにアクセスできるプロトタイプを作るのが有効です。 コストは高くつくかもしれませんが、目的を達成するには必要です。しかし他のケースでは、プロトタイプに時間を投資する価値があるかどうか考えましょう。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、
アプリデザイン

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

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。   プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。 最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。   昔のデモディスクを覚えていますか？ 機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。 プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。   最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。 最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。   今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。 このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。   ワイヤーフレーム＆モックアップ VS. プロトタイプ デザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。 ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。 ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。 例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。 それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。   いつプロトタイプが必要になるのか？ 何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。 わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。 シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。 また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。 加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。   [PR] プログラミングで挫折しない学習方法を動画で公開中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ページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。 または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
アプリデザイン

転職を成功させるために！事前にやるべき面接の練習方法まとめ

転職活動で乗り越えるべき選考。自分がいきたい企業に自身の有用性をアピールしていけるか重要な局面と言えるでしょう。そんな選考過程で避けることができない採用面接ですが、苦手に感じる人も多いのではないでしょうか。そんな苦手な面接の対策として、いざ面接を練習しようと思っても、どうすれば良いのかなかなか分からないもの。一般的に堂々とした態度でハキハキ話すことが良い心象を与えると言われますが、それは慣れやスキルによるものが大部分です。裏を返せば、抑えるべきポイントを抑え、何度も練習しておけば上手に面接を受けることができるのです。 そんな面接力を短期間で磨きたい人のために面接練習法を解説していきます。効果的な練習を実践して、自信を持って面接に臨みましょう。     いよいよ採用面接が近づいてきました。ハキハキと対応できるか不安なんです。     面接は内定を獲得するためには避けられない大事なステップですね。     そうなんです。以前の面接で緊張してしまって、自分の事をきちんとアピールできなかったんです。     面接では堂々した態度で挑むことでよい印象を与えることができます。その為には慣れが必要ですから、面接の練習をすることをお薦めします。     面接の練習ですか？面接の日が近いのですが、間に合うでしょうか？     大丈夫です！面接力を短期間で磨くための練習方法を紹介しますよ！     目次 練習を始める前に 面接のポイント 練習で抑えるべきこと 代表的な練習方法   練習を始める前に 面接は受ける会社や面接官によって内容は様々です。しかし、一般的に聞かれることや気をつけておくべきポイントは確かに存在します。また、志望業界や業種が定まっているのであれば、聞かれる質問の傾向も調べておくべき業界の情報も自ずと近しいものになるでしょう。 準備しておいても意味がないという考えの人もいますが、ポイントを押さえて行えばあらゆる面接に対応できるようになります。面接練習を行う際に押さえるべきポイントや心がけるポイントについて解説していきます。   [PR] プログラミングで挫折しない学習方法を動画で公開中面接のポイント 面接の対策を行う前に面接ではどんなことがチェックされるのか、共通する準備は何かを知っておきましょう。大きく分けると3つの事柄を押さえる必要があります。それは「良い印象を与えること」「自分の言葉で話せること」「今後についてしっかり話ができること」です。いずれの対策も企業と個人の力関係の上下や優劣を表すものではなく、しっかりとビジネスで通用する人物であるとアピールするためのものですので参考にしていきましょう。   良い印象を与える 面接では、第一印象が非常に重要です。多くの面接官が入室から最初の質問のほんの短い時間で印象を固め、人柄の判断を行います。そのため、話をすることやアピールをすること以前に良い印象を与えることが最低限の選考通過の条件と言えるのです。人の印象を決めることがらは「表情」「姿勢」「動作」「視線」「話し方」などが挙げられます。 ・表情：強張ったり、無表情はNG。当然緊張していますが、最初の挨拶や会話の端々で笑顔を交えるようにしましょう。 ・姿勢：立ち方や座り方で、背筋が曲がっていたり、足が大きく開いていたり・・・なんてことがある人もいるでしょう。面接時間は〜1時間程度が通常。その時間は背筋を伸ばし、正しい姿勢で座り続けることが必要です。 ・動作：歩き方や座る際など、相手の声かけやペースを見て動きましょう。当然、オフィスビルに入るところから気をつける必要があります。また、余裕があれば話の際に身振り手振りをすることも◎。 ・視線：話をするとき、聞くときの視線は「目は口ほどに物を言う」というだけあって非常に重要。伝えたい気持ちや聞こうとする姿勢が目線に表れると判断されるでしょう。自信を持って相手の目をみることが重要ですし、相手が話をしている際に目線を合わせてきたら受け止めましょう。会話の間やちょっと思案する際に目線をそらすことで圧迫感が減りますのでバランスよく目線を動かしましょう。 ・話し方：最低限敬語でしっかり話せるようにしましょう。また、ハキハキと相手が聞き取りやすいペースで話をすることが大切。緊張と不安で声が小さくなったり、早口になってしまうことがありますので、ゆったり大きな声で話ができるように心がけていくことが重要です。 これらを意識することで第一印象から「ちゃんとしているな」という印象を持ってもらうことができるでしょう。普段意識していない動作や姿勢など難しいこともあるかもしれませんが、面接対策ではしっかり押さえておきたいところです。   自分の言葉で話す 面接の対策を行う場合に陥りやすい事は、本やマニュアルを鵜呑みにして自分の言葉で話ができなくなってしまうことです。面接官は多くの候補者と話をしていますし、当然、市場の面接対策も熟知しています。よくあるテンプレを丸暗記…なんてことをしてしまうとあっという間に選考から外れてしますでしょう。そうならないためにも、本やマニュアルを参考にしつつ自分の言葉でしっかり話をしましょう。自分の言葉で伝えるためには以下のポイントを念頭に話をすると良いでしょう。 ・一生懸命伝える：実は面接では必ずしも綺麗な回答が評価を勝ち取る訳ではありません。先にあげた印象の部分を抑えているのであれば多少言葉に詰まっても「これを伝えたい」という意欲を見せることが大切。前のめりに話す内容は十分アピールとなるでしょう。 ・背伸びはしない：本やマニュアルを参考にしているとわかったつもりの単語や用語が増えてしまいがち。詳しい意味は知らないけれど…なんて言葉は使わないようにしましょう。そして、質問で見たことがある、聞いたことがある程度の事柄を聞かれた際に分からないのであれば「分からない」と正直に伝える勇気を持ちましょう。面接官の前では曖昧な回答や知ったかぶりはすぐに見破られてしまうので、素直で誠実な回答をしましょう。   今後についてしっかり話をする 先の二つは心構えや姿勢でしたが3つ目のポイントは具体的に考えるべきところ。自分の未来をしっかり話すことが必要です。自己PRや経歴紹介で過去について話す事は多くあるため、整理すれば難なく対策ができますが、「では、これから何がしたいのか」といった内容は考え抜かねばならないものです。志望動機や3年後のキャリアなどに繋がる重要な部分ですので、自分の未来はどうあるべきだと考えているのか、そのためにここでキャリアを積みたいと納得させられるよう、イメージを脹めせ、具体的に話ができるようにしましょう。 この3つの面接のポイントを実践しながら練習を行うことで、本番でもしっかりとした結果を残すことができるでしょう。   練習で抑えるべきこと 面接で押さえるポイントを理解したところで、なんとなく練習を始めてもなかなかいい効果は出ないものです。面接の練習をする時はただ漠然と練習するのではなく、必ず練習の成果となる理想の面接をイメージし、結果がどうであったかを振り返りましょう。毎回練習を行う度に改善が必要なポイントを見つけて対処していけば、本番に向けて徐々にレベルアップしていくことができます。 良い面接のイメージをしっかりともち、自分が苦手なとしていること、足りていない部分にしっかり目を向けて取り組みましょう。また、練習をすることで逆効果になってしまうこともあります。練習する上で注意すべき事柄も理解しておきましょう。   回答をまるごと覚えようとしない 面接で何を聞かれるか予想可能な質問はいくつかありますが、回答をまるごと覚えることはおすすめできません。一言一句をそのまま覚えて答えようとすると、棒読みのようになってしまいがちです。練習を繰り返していくうちに覚えていくのであれば問題はないですが、練習の目的が回答を覚えることになってしまうのはNG。これでは面接官に「本などに載っていた答えをそのまま答えているのでは」と思われかねません。 また、完璧に答えなくてはいけないと緊張状態になり、少しでも言い間違えてしまった時に動揺してしまう可能性もあります。想定できる質問があるのであれば、回答の要点だけを押さえておくことがポイントです。 練習の際には場の雰囲気や話の流れを意識しながら、押さえておいた要点をしっかり伝えるようにしましょう。 そうすれば自然な受け答えになりますし、面接官に「しっかり自分の言葉で伝えている」という印象を与えることができます。臨機応変な受け答えができるようになるので、本番で動揺する心配も減らせますね。     面接ではどんなことがチェックされるのでしょうか。     色々な要素をチェックするのですが、必ず共通するのが「良い印象を与えること」「自分の言葉で話せること」「今後についてしっかり話ができること」の3つです。     3つのポイントを抑えて、落ち着いて対応するということなのですね。自分の言葉で話すというのが大事なのはわかるのですが、なかなかうまく話せませんでした。     面接の練習は漠然とするのではなく、必ず練習の成果となる理想の面接をイメージすることが肝要です。背伸びをせず誠実に答えるよう練習しましょう。     事前の練習が大事なことはよくわかりました。具体的な練習方法を教えて頂けませんか？     分かりました！面接で失敗しないための代表的な練習方法を紹介しますね！     コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
キャリア・転職

Goodpatchのプロダクトマネージャーに聞く！プロトタイピングツール「Prott」を使ったプロトタイピングの重要性とは

今日では、ソフトウェアやサービス、アプリ開発の現場において、必須プロセスとなっているプロトタイピング。IT業界ではこの1、2年でプロトタイピングのカルチャーが浸透し、多くの開発現場でプロトタイピングツールが導入されています。 今回は、今大注目のプロトタイプを誰でも簡単に作ることができるツール「Prott（プロット）」を開発している株式会社グッドパッチのプロダクトマネージャー、岡田麻里さんにお話を伺ってきました。 2016年7月20日に画面遷移図機能がリリースされたProttを中心に、チームでのコラボレーションやプロトタイピングの重要性など、デザインの魅力満載のインタビューとなっています。   お話を伺った方 岡田 麻里さん 株式会社グッドパッチ、Product Divisionのプロダクトマネージャー。 学生時代からインターンとしてプロトタイピングツール「Prott」のカスタマーサポートの業務を担当。 2015年に株式会社グッドパッチに新卒として入社と同時にプロダクトマネージャーとなり、新機能の企画開発を始め、改善の進行管理など、幅広い業務に携わっている。   以下、インタビューです。   Prottの新機能「画面遷移図機能」とは ――まずは、Prottの新しい機能に関してお伺いしてもよろしいでしょうか？ Prottでプロトタイプを作るだけで自動的に画面遷移図が生成される機能です。 「クライアントワークをしているとプロトタイプと合わせて画面遷移図を納品しないといけない。プロトタイプと一緒に画面遷移図もProttで作れないか」という要望を数多くいただいていました。 画面遷移図は、全体を俯瞰するために使うものですが、寄りの視点をプロトタイプで確認しながら、かつ画面遷移図を出力して、引きの視点を見てプロダクト自体のデザインを確認できる、寄りと引きの視点をもってプロダクトを改善できる機能になっています。 画面遷移図を最新の状態で保つのって結構面倒な作業なのですが、それが自動的にできるため、大幅な時間の削減にもなりますね。 ――具体的に作っていた期間はどのくらいでしょうか。 2016年3月頃から着手したので、リリースまでは約3ヶ月ぐらいですね。   ――何人ぐらいで実装されていたんですか。 実装はエンジニア1人です。グッドパッチにはエンジニアが多く在籍していますが、開発は小さなチームで行うのが主流なんです。   [PR] プログラミングで挫折しない学習方法を動画で公開中プロトタイピングが作業を効率化させる ――プロトタイピングの重要性について教えていただけますか？  プロトタイピングという手法を用いることで、アイデアを素早く形にし、それを共有してアイデアが実際にユーザーにとって受け入れられるかどうかを検証することができます。 一般的な開発現場で多い、ディレクターからデザイナー、エンジニアへと直線的に依頼する方法ではなく、設定されたゴールに向かって、それぞれの職種がプロトタイプを中心に議論を行い、チームとして一緒に進んでいくことができます。 直線的なコミュニケーションで起きていた「これ実際できないよね？」のような議論や手戻りを削減し、作業を効率化させることができるんです。   ――そもそもProttを開発したきっかけはなんだったんでしょうか。 今から約2年ほど前、Prottがリリースされた当初はIT業界ではプロトタイピングというカルチャーは浸透していませんでした。 リリース当時は、プロトタイピングというカルチャーと合わせてProttを知っていただくことから始めました。 実際に、グッドパッチでも当時国産のプロトタイピングツールがなかったので、海外のプロトタイピングツールを使用してプロトタイプを作成していたことがあるのですが、チームで使うには最適化されておらず、口頭や資料でいろんなことを説明したはずなのに、実装されたアプリを確認すると、意図したことと異なっていたり、非常に使いづらい仕上がりになっていることが頻繁に起こりました。 最適なものがないのであれば、自分たちで使いやすいものを作ろう！となったのがきっかけですね。   ――開発のプロセスはどのようなものだったんでしょうか。 開発当初は、エンジニアがいない状態からスタートしました。 代表の土屋とデザイナーとで議論をしながら進め、開発から2か月後にエンジニアが入社するという、まさにスタートアップらしい始まりです。 当時はノウハウなどは全くない状態でしたが、いいプロダクトをつくるために誰でも簡単い使えるプロトタイピングツールが絶対に必要だという確信があったのだそうです。 代表の土屋と開発メンバーで、作ったばかりのプロトタイプを持ってユーザーの要望を聞いて回り、改善を重ねていきました。Prottを開発しているプロセスがまさにプロトタイピングそのものなんです。   一人でできることが限られているからこそ、チームでのコラボレーションを   ――チームでのコラボレーションの重要性に関して、どうお考えですか？ やっぱり一人でできることってすごく限られているなと思っています。チームメンバーひとりひとりがプロ意識を持っているからこそ、皆それぞれの視点でぶつかり合って、意見を出し合って、結果的にそれぞれの職種の視点が取り込まれたいいものができるんです。 色んな人の視点を入れてコラボレーションするっていうことがプロダクト作りにおいて本当に大切だなと思っています。   ――Prott導入後、チーム内で変化する点はどういうところにあるのでしょうか？ チームでProttを使うことで、プロトタイピングのマインドがついてくるので、無駄な議論が減りやすくなりますね。 プロトタイピングでは、動くものを共有できるので、言葉や絵で共有するよりも伝えられることが多いんです。そのためメンバー間での認識齟齬が減り、チームでは論点が明確な議論ができるようになった、という話もたくさん聞いています。   ――実際どういった方々がどういう場面でProttを使われているのでしょうか。 現在は、日本国内のIT企業で多く導入していただいています。 多くの場合は現場のデザイナーさんが主導でProttを導入を希望してくださり、そこからProttを使って共有することでエンジニアの方もプロトタイプを通してコミュニケーションをするといったケースが多いですね。 最近では、営業の方が提案資料をより魅力的なものにするために、アイデアを形にするためにProttを使用していただくことも増えてきました。職種を超え、誰でも簡単に使えて、アイデアを形にして議論できるというのがProttの良いところだと思います。   ――個人で使用されている方々の使用用途はどういうものがあるのでしょうか。 最近増えているフリーランスの方がクライアントと共有するために使用するケースも多いようです。 あとは、UIデザインの勉強のために使っていただくことが多く、多摩美術大学の学生さんにも授業で使っていただいています。 先日は、女子大生社長として有名な椎木里佳さんが好きなアプリとして取り上げてくださっていましたね。授業中に思いついたアイデアスケッチを写真に撮り、Prottにアップロードしてメンバーに共有しているそうです。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
インタビュー

PythonによるWebスクレイピングの方法を現役エンジニアが解説【初心者向け】

PythonによるWebスクレイピングの方法ついて解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、PythonでWebスクレイピングする方法についての内容だね！ 大石ゆかり Webスクレイピングとは何でしょうか？ 田島悠介 Webスクレイピングでできること、その方法を解説していくね！ 大石ゆかり お願いします！   Webスクレイピングとは Webスクレイピングとは、Webページの情報をプログラムを使って取得できる技術です。他のプログラミング言語でもWebスクレイピングはできますが、今回はPythonを使ってWebスクレイピングする方法を紹介します。   Webスクレイピングで何ができる？ では具体的にWebスクレイピングでは何ができるのでしょうか？ たとえば、以下のようなことができます。 あるサイトの特定部分のテキストを定期的に取得 ネットオークションの価格を自動で取得 自動でサイトにログインして、ほしい情報を取得 Webスクレイピングは、業務の自動化などで活躍します。 [PR] プログラミングで挫折しない学習方法を動画で公開中Webスクレイピングのためのライブラリ・フレームワーク PythonでWebスクレイピングをするための代表絵的なライブラリやフレームワークをいくつか紹介します。 urllib.request Pythonの標準ライブラリです。URLを指定し、Webサイトの情報を取得できます。 Requests urllib.requestに同じく、Webサイトの情報を取得できます。Requestsは人間のためのHTTPとしても親しまれていて、扱いやすいのが特徴です。 beautifulsoup4 beautifulsoup4は、サードパーティ製のhtmlパーサライブラリです。取得したWebサイトから特定のテキスト情報などを抜き出せます。 Webスクレイピングといえばbeautifulsoup4、と覚えてもよいほど有名です。 Selenium 自動でブラウザを操作する為のライブラリです。スクレイピングにも活用することできます。 HTMLの要素にアクセスして情報を取得できるのはもちろん、クリック操作などの制御も可能です。 Scrapy Pythonにおけるスクレイピングのためフレームワークといえば、Scrapyです。 Scrapyは、スクレイピング（Webサイトからデータを取得する）だけではなく、クローリング（プログラムがインターネット上のリンクを辿ってWebサイトを巡回し、Webページ上の情報を複製・保存すること）もできます。少し難易度が高くなりますが、余裕のある方は使ってみてください。   実際に書いてみよう いくつかライブラリ・フレームワークを紹介しましたが、今回は「beautifulsoup4」を使い、実際にWebスクレイピングをします。 NewsPicksのトップページに表示されている記事のタイトルを自動で取得し、出力するプログラムを書いていきます。 サンプルコード(mymod.py) import requests from bs4 import BeautifulSoup result = requests.get('https://newspicks.com/') data_1 = BeautifulSoup(r.text, 'html.parser') data_2 = data.find_all("div", class_="title _ellipsis") for item in data_2: print(item.getText())   実行結果 ボーイング、737減産へ　2割、墜落事故の影響拡大 アップル米有料音楽で逆転　スポティファイ上回る 【必見】シェアエコのいまを押さえる3つのポイント 米大統領、金融緩和を要求　FRBに圧力強める 【独自調べ】「令和」改元は、経済にどんな影響を与えるか？ 【猪瀬直樹】作家の道標は、三島由紀夫とカポーティ ボーイング、737減産へ　2割、墜落事故の影響拡大 アップル米有料音楽で逆転　スポティファイ上回る 【必見】シェアエコのいまを押さえる3つのポイント 米大統領、金融緩和を要求　FRBに圧力強める 東大生が教える｢文章が苦手｣が一瞬で治るコツ Amazon印のワイヤレスイヤホンが開発中？ AirPodsのライバル候補か ｢四角いクルマ｣は､なぜ日本で大人気なのか 解説 requests.get()でNewsPicksトップページのHTMLを取得 find_allでclassを指定し、タイトルを取得 配列に格納された値をfor文とprint文で出力   大石ゆかり 普段みているようなサイトでも簡単にスクレイピングできるんですね！ 田島悠介 余裕ができたらログインなども試してみてね！ 大石ゆかり 分かりました！ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。 プログラミングを独学していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう
Python

SeleniumとBeautifulsoupを利用してPythonでスクレイピングする方法を現役エンジニアが解説【初心者向け】

SeleniumとBeautifulsoupを利用してPythonでスクレイピングする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 SeleniumとBeautifulsoupを利用することで、Webページの内容のいち部分を指定して保存できます。 実務でも、自社サービスの表示データの一部をスクレイピングするので、ぜひ学習してみてください。 目次イータイピングマイタイピングEasyタイピング寿司打P検無料タイピング そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 SeleniumとBeautifulsoupを利用してPythonでスクレイピングする方法について詳しく説明していくね！ 大石ゆかり お願いします！   Seleniumとは Seleniumとは、Webブラウザの操作を自動化させるためのライブラリです。 2004年にThoughtWorks社のJason Hugginsによって、ThoughtWorksの内部ツールとして開発されました。 ブラウザ操作の自動化を行うためのスクリプトであるSeleneseでテストを実行することから始まりました。 その後、Seleneseを使う代わりに汎用的なプログラム言語でもテストを行えるクライアントAPIも提供されています。 現在提供されているのは、次の言語用クライアントAPIです。 Java C＃ Ruby JavaScript R Python Kotlin   Beautifulsoup4とは 近年は機械学習などのデータを作成する時に、Webサイトからのデータを収集するための作業をプログラムを使って、半自動化することで大量のデータの取得を効率化させることが多くなりました。 そこで使われる手法がスクレイピングです。 Pythonではいくつかのスクレイピングライブラリがありますが、その1つがBeautifulsoup4です。 Beautifulsoup4とは、HTMLやXMLの中から必要なデータを抽出するためのPythonライブラリです。 HTMLの中身を解析してツリー構造にして目的のコンテンツを取得できることです。 つまり、Seleniumからブラウザを操作して出力された目的のページのHTMLをBeautifulsoup4で取得して、中身の構造を解析してプログラムから目的のデータを抽出するという流れがPythonでスクレイピングをやる時によく使われる手法です。 ちなみあらかじめ目的のページのURLがわかっている場合は、Seleniumの代わりにurllibを使ってHTMLを取得する方法もあります。   [PR] プログラミングで挫折しない学習方法を動画で公開中Selenium IDEインストール方法 1.SeleniumIDEのダウンロード ChromeウェブストアのSelenium ページにアクセスしてChromeに追加をクリックします。 もし、Chromeウェブストアページが見つからなかったら、「chromeウェブストア　Selenium 」で検索してみてください。 2.SeleniumIDEのインストール Selenium 拡張機能を追加すると、Selenium IDEのインストールが完了します。 今回はMicrosoft Edgeを利用していますが、Microsoft EdgeはChromeと互換性のある、Chromiumエンジンを利用しているため、Chrome拡張機能の利用が可能です。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、
Python

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） パソコン周辺機器 キーボード 【PC初心者必見！】キーボードタイピングの練習ができるサイト5選