【初心者でも分かる！】デザインツールJustinmindの使い方

初心者向けにデザインツールJustinmindの使い方について解説しています。Justinmindを登録するところから実際に作ってみる流れが分かるはずです。ワイヤーフレームやプロトタイプを作成する上で役に立つはずです！

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

初心者の方でも分かるようにJustinmindの使い方について解説している記事です。

サイトのワイヤーフレームやプロトタイプを作成する上で非常に便利なツールなので、ぜひ活用してみてください。

なお本記事は、TechAcademyのUI/UXデザインオンラインブートキャンプの内容をもとに紹介しています。

Justinmindとは

Justinmindは、Windows・Mac両方に対応したデザイン作成デスクトップアプリケーションです。チュートリアルが丁寧で使いやすく、また無料でも充分に豊富な機能を利用することができるようになっています。ブラウザで実際の動作を確認することも可能です。

Justinmindの使い方

まず、以下のリンクにアクセスします。

http://www.justinmind.com/

「Download Free」をクリックします。

jim_p_1

アカウントの作成画面が表示されるので、メールアドレスを入力しパスワードを設定します。

jim_p_2

ログイン後、以下の画面の2番から本体のダウンロードを行うことができます。ダウンロード後、Win・Macそれぞれの手順に従ってインストールを行います。

jim_p_3

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

Justinmindで何か作ってみる

ファイルの新規作成と基本操作

実際にプロトタイプを作成してみます。
Justinmindを起動すると以下の画面が表示されます。今回は「New」を選択します。

jim_p_4

デバイスの一覧が表示されます。今回は「Web」を選択します。

jim_p_5

作成するファイルの状態は全く何も編集されていない真っ白なスクリーンの他に、サンプルなど基本の形が出来上がっているものも選択することができます。今回はサンプルの中から「Responsive」を選択します。

jim_p_6

作業画面が表示されます。

jim_p_7

画面の拡大・縮小はこのメニューから行うことができます。

jim_p_8

表示されている画像やテキストなどをクリックすると、その部分を選択した状態になります。各要素はドラッグにより大きさの変更や移動を行うことができます。

jim_p_9

また、編集したい箇所を選択し右クリックするとコピーや削除などの操作が可能です。

jim_p_10

今回はスクリーンを新しくひとつ作成し、現在表示されているスクリーンからリンクを貼るまでの作業を行います。

「Screens」のメニューから「＋」のアイコンをクリックします。

jim_p_11

スクリーンの名前を設定します。ここでは「Title2」としています。

jim_p_12

左の「Widgets」メニューから各要素を追加していきます。
使用したいものをスクリーン内にドラッグ＆ドロップで移動します。

jim_p_13

設置したものはドラッグで拡大・縮小・移動することができます。
また、テキストに関するステンシルの場合はダブルクリックで文章を編集することができます。

jim_p_14

「Widgets」メニューにある素材の他に、PCから画像ファイルをドラッグ＆ドロップでスクリーン内に入れることも可能です。

jim_p_15

ここで設置した画像もドラッグで自由に編集することができます。

jim_p_16

また、各要素を選択した状態で「Properties」メニューを見ると、その要素に設定されているIDなどの詳細が確認できます。テキストの編集や画像の大きさの編集(px値などを直接入力できます)はここからでも行うことが可能です。

jim_p_17

最初のシートの編集に戻りたい時は、「Screens」メニューから該当のシート名をクリックします。(このサンプルでは「Desktop Layout」という名称になっています)

jim_p_18

次に、この最初のスクリーンから先ほど作成した「Title2」スクリーンへのリンクを作成してみます。
リンクを貼りたい箇所をクリックで選択します。

jim_p_19

下の「Events」メニューから「Add Event」をクリックします。

jim_p_20

アクションを行う条件と、その際の動作を選択します。ここでは「on click」により「link to」が行われるように設定します。

jim_p_21

リンク先として選択できるスクリーンの一覧が表示されます。
移動先として指定したいスクリーン(ここではTitle2)を選択し、必要な場合は下から効果を選択して右下の「OK」をクリックすれば完了です。

jim_p_22

プレビューを使用する

右上の「Simulate」ボタンをクリックすると、ブラウザでプロトタイプをプレビューします。リンクの状態もこの時確認することができます。

jim_p_23

保存とエクスポート

上メニューの「File」メニューから「Save」を選択すると現在の状態が保存されます。

jim_p_24

また、「File」メニューからはHTMLやPNGなどの形式でエクスポートすることも可能です。(※有料版あるいは無料体験期間のみ)

jim_p_25

プロジェクトの共有

「Share」ボタンをクリックし、アカウントのメールアドレスとパスワードを入力すると作成したものを共有することができます。

jim_p_23-1

以上、Justinmindについて紹介してきました。今回はWebのプロトタイプを作成しましたが、もちろんタブレットやスマホアプリのプロトタイプも作成できます。

ぜひWebサービス・アプリ開発に役立ててみてください！

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

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

今日では、ソフトウェアやサービス、アプリ開発の現場において、必須プロセスとなっているプロトタイピング。IT業界ではこの1、2年でプロトタイピングのカルチャーが浸...

インタビュー

【アプリ開発にも役立つ！】プロトタイプを作成できるツール5選

プロトタイプとはWebデザインにおいて、動作を確認するための試作品を指します。モックアップがレイアウトやデザインを見るものであるのに対して、プロトタイプは機能の...

アプリデザイン

スマホアプリのプロトタイピングに便利な「POP」を使ってみた

スマートフォンアプリのプロトタイプを作ろうと思うと、かなり手間がかかると思います。そんな時に便利なのが、無料で簡単にプロトタイピングが行えるスマートフォンアプリ...

アプリデザイン

【今さら聞けない！】UI/UXデザインの違いとその学習方法とは！

スマートフォンが普及してから、主にアプリの開発において「UI/UX」というキーワードが非常に重要視されています。UIデザイナーやUXデザイナーといった職も生まれ...

アプリデザイン

ほとんどのデザイナーが気付いていない「UXの4つの間違い」とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、HooktoWin.comの共同設立者であるAn...

アプリデザイン

【事例から学ぶ！】聞いたことはあるけど「UIデザイン」とは？

「UIデザインとは」何なのか、歴史などを踏まえて解説しています。そして、UIデザイナーを目指す上で参考になる勉強サイト等も紹介しています。初心者の方でこ...

アプリデザイン

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

【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。また本記事は、Mary Stribley氏によって投稿されたものです。グラフィックデザイナーにとって、グリッドは特に重要なデザインツールであるとされています。ほんの数本のグリッドの存在がデザインに加わることが、デザインプロジェクト全体にとって、極めて重要なのはなぜでしょうか？デザイナーは一人一人異なる答えを持っているかもしれませんが、要するに、グリッドは、それなしでは時間もかかり、面倒で困難なデザインを構築するのに役立ってくれるのです。もしあなたがグリッドデザインの世界を探求しようか迷っているとしたら、グリッドをレパートリーに加えるだけで、デザインが非常に良くなる15の理由をお話します。 01. コンテンツが整理されるグリッドの主な利用価値の1つは、デザインの要素を整列化、順序化したり、Webページをクリーンできちんとしたデザインにするのに役立つことです。これはグリッドの整列機能の効果であり、グリッドの役割の大部分を占めていると言えます。グリッドシステムを確立することで、要素を整列化するのに使える基本構造を自分自身で創ることが可能となるのです。そして、これによりクリーンで整理されたレイアウトを実現できます。例として、Christine Wisnieski によるTwist CreativeのGridデザインのレイアウトを見てみましょう。各要素がきれいに整列されて、全体としてクリーンな仕上がりになっています。グリッドを使うときには、各要素をきれいに整列できるようなタイプのものを見つけましょう。要素とは具体的には、文章、画像、グラフィックなどで、その他どのような対象も要素となりえます。最終的な完成イメージという大まかな全体像から始めて、それに合うグリッドを組み立てましょう。 02. あなたの仕事を高速化する常に高速化と効率化を追い求める世界で生きる私たちにとって、「効率改善」などは耳に聞き慣れた言葉ですから、このメリットの説明は、すんなりと受け入れてもらえるかもしれません。グリッドは、あなたのデザインにかける時間を、よりスピードアップして充実したものにしてくれるでしょう。というのも、どのポジションに要素を配置するのが最高の選択なのかを示すガイドとしても、機能してくれるからです。要素が良く見えそうなポジションを手さぐりで探してから、ランダムに配置するという作業をしなくても、グリッドがあれば、あなたを自然な解へと導いてくれるでしょう。グラフィックデザイナーのTroy Templeman氏が述べるように、「Gridデザインは、どの場所にコンテンツを配置できるかというよりむしろ、どの場所にコンテンツを配置すべきかという、デザイナー自身の決定をサポートすることで、デザインのプロセスをスピードアップしてくれる。」というわけです。グリッドは家の建築の土台のようなものとして考えることができます。一番最初に建造しておくべきものの1つであり、そこからさらに構築を進めます。 [PR] Webデザインで副業する方法とは03. 文章の居心地が良くなるようなレイアウトを実現できる少なくとも、グリッドと文字は、2つのデザイン要素として相性のいいの組合せです。強力なグリッドは、文章量の多いレイアウトを、よりすっきりとして組織化された印象に整えてくれます。ボディコピーの文章も読みやすくしてくれるでしょう。文章を読みやすくするのに役立つグリッドの手法の1つに、「ベースライングリッド」があります。これはノートの罫線のようなもので、文章の1行1行がベースラインとなるグリッドの上に乗ります。これらのグリッドは、文章で作られた各要素が、同じ高さに並ぶように整えてくれます。もしあなたが文章の行を整列していなくても、多くの人はその特定のアンバランスな箇所には気づかないかもしれませんが、あなたのデザインが全体として散らかっているということは無意識的に気づくものです。つまり、小さな変化が大きな効果をもたらしてくれるのです。これは、「ベースライングリッド」の実例です。各行がそれぞれ整列されていて、クリーンですっきりとしたタイポグラフィーの効果を生み出しています。 04.　他のデザイナーとの共同作業をもっと容易にしてくれるあなたも今までに他のデザイナーと共同で仕事をしたことがあるでしょうか？そのような場面では、グリッドは、ストレスとコミュニケーションの齟齬をいくらか和らげてくれるかもしれません。すでにお話したように、グリッドはデザインに基本構造を作るのに役立ち、個々の要素がどの場所に置かれるべきかについての方針も示してくれます。もし、あなたが最初にグリッドからデザインを組み立てていれば、新しいデザイナーが途中から加わったときにも、あなたのデザイン手法や、要素の配置の意図を理解してもらえるでしょう。例として、あなたが下にあるようなデザインに取り組んでいて、これから第3パラグラフを作成するときに、他のデザイナーに参加してもらうよう依頼するケースを考えてください。グリッドシステムを使っていれば、配置や整列を正確に実践できます。加えて、「カラムの幅はどのくらいにしますか？」「1つ前のカラムからどのくらいの距離を空けて配置しますか？」などのメッセージが行ったり来たりすることも少なくなるでしょう。というのも、グリッドによって全ての答えはすでに用意されているからです。他のデザイナーと共同で仕事をする時には、わかりやすくて、最終的な完成品に合うグリッドシステムを構築しましょう。必要なカラムの数が3つであるなら、13も使う必要はありません。グリッドシステムを組み立てていないうちから、要素の整列を行うのは避けましょう。グリッドを機能的で役立つものにしておくのが大切です。 05. バランスの整ったデザインを創りやすいグリッドの美しさはその統一感にあります。あなたのデザインを複数のカラムに分割しようとするときには、シンメトリーなレイアウトから始めることになるでしょう。左右のどちら側のデザインがもう一方の側からずれているか判断することも、容易になるでしょう。例として、以下のMaan Ali氏によるWebサイトのデザインを見てみましょう。左右対称なグリッド、大きさの均一化されたブロックと文章を使うことで、均整のとれたデザインになっています。他の例として、Braulio Amado氏によるデザインでは、中央のグラフィックを加えて3つのカラムとして表現することで、シンメトリーで完璧なバランスになっています。かなり強いデザインであるために、圧迫感のある印象を人に与えやすいにもかかわらず、きちんと整列して完璧なバランスを実現することで、クールで落ち着いたデザインになっているのです。 06. マルチページのレイアウトに統一感を与えるグリッドは複数ページのレイアウトにも役立つでしょう。レイアウトにグリッドを使うことで、あるページから別のページへ、あるレイアウトから別のレイアウトへ、グリッドを継承することが可能です。容易にレイアウト全体の一貫性を保つことができます。例として、WebサイトのRolling Stoneを考えてみましょう。数多くのページから構成されていますが、各ページの構造やコンテンツはそれぞれ異なっています。全体のページで一貫したレイアウトを保ちながら、各ページごとに最高の方法でデザインするには、どうしたら良いと思いますか？以下の画像では、WebサイトのRolling Stoneの音楽のページとトップページを比較しています。4つのカラムで構成されるグリッドデザインを使うことで、一貫性があり、クリーンで、親しみが持てるような外観になっています。一方で、各ページにある空白のスペースも、ページがしっかり機能することに役立っています。グリッドがマルチページのレイアウトに役立つ具体例としては、スタイルガイドのようなマニュアルが一般的です。これらは教育目的で使われ、線形のデザインで整えるのが望ましいため、グリッドが活用されるのです。例として、以下のMike CollingeによるBosphorusのスタイルガイドでは、グリッドが統一して使われています。複数のページをデザインするプロジェクトに取り組んでいるとしたら、「素晴らしいマルチページのレイアウトを設計するためのチェックリスト」に目を通しておきましょう。 07. 階層化したデザインを表現できる Gridデザインの共通の前提は、グリッドを使うことで各要素を均一なサイズのブロックに分けることですが、こうすることで自動的にデザインをコントロールできます。階層化はデザインにとって大切なことであり、グリッドはこの階層化をスピードアップして容易にしてくれます。あなたが階層化の大切さにまだ気づいていないとしても、全てのデザインは少なくとも3段の階層を持つべきである理由のリストによって、その認識は変わるでしょう。例として、NASAのホームページのデザインを見てみましょう。 4つのカラムのグリッドで構成されるデザインで、より重要度の高い画像を、複数のカラムや列の領域まで引き伸ばして大きくすることで、階層を表現しています。「ハロウィーンの空を飛ぶ活動を終えた彗星」の左上の画像は、2カラム×2列分のサイズに広げられ、ページの中で最も注目を引くようにデザインされています。他の重要な話にも、画像が複数のカラムに引き伸ばされたものがあります。印刷物にもグリッドをデザインの基本として使うことができます。複数のカラムのサイズに拡大することで、ある要素に注目を集めたり、逆に小さなカラムのサイズにして、ある要素を目立たないようにすることができます。次の例は、David Tang氏によるデザインで、数字の23や30に注目を集めるように、グリッドの大きさや配置が工夫されています。 08. 散らかったレイアウトと、さよならできるグリッドは、恐怖の散らかったデザインを一掃してくれる素晴らしいツールです。そのためには、マージンを使いましょう。マージンとは、デザインのまわりの余白のことです。一般的に、マージンが狭いほど、あなたのデザインは詰まって散らかって見えてしまいます。マージンをより広くすることで、整ったクリーンなデザインに見せることができます。以下の例では、マージンがグレーの色でマークされています。グリッドとマージンはしばしば一緒に使われますが、この組合せには、デザインをより開かれたクリーンな印象にする効果があります。散らかったデザインを回避するもう1つの方法は、ガターを使う方法です。ガターとは、グリッドのカラム間にある余白のことです。ガターのサイズは調整できますが、機能するグリッドを作るためには、全体のガターサイズは統一しましょう。マージンとガターを組み合わせることで、効果的な結果を生み出している例を見てみましょう。このAisle One によってデザインされた壁紙は、マージンとガターが目立つようなデザインであるため、それぞれいかに効果的に使われているかに気づかせてくれます。 09. 心地よいデザインの世界が開ける芸術家や写真家など数多くのデザイナーが、グリッドを作品のベースに使っている理由は、数学的な美しさを持つデザインを生み出すと考えられているからです。グリッドによって心地よいデザインを生み出す方法の1つに、「三分割法」があります。最も基本的かつ簡単な方法の1つです。写真の技術としてもよく使われる方法ですが、理論の根本は、各2本の水平線と垂直線によって、全体のデザインを9つの均一な区画分けることにあります。線の交点(以下の例ではブルーの円)にデザイン要素を置くことで、心地よいデザインを生み出します。この理論が写真に使われるとき、写真家は、レンズの焦点がこれらの交点に集まるようなフレームを慎重に選びます。試しに「三分割法」をあなたのテキストデザインに取り入れて、目に心地よくなるかどうか確認してみましょう。ページを水平方向と垂直方向に均等な3×3の区画に分けて、これらのシンプルなガイドを応用するだけです。 10.　グリッドのルールを破ってインパクト効果を狙うグリッドのレイアウトのルールを守ることで、クリーンで整った美しいデザインを生み出すことができますが、時にはグリッドのルールを破ることで、ユニークで人目を引くような効果を狙うことができます。例として、99Uによるデザインでは、シンプルな3カラムグリッドが使われていますが、イエローの文字を対角方向にページ全体に走らせることで、グリッドによるクリーンな直線性のルールを破っています。「Think differently(考え方の転換)」というメッセージを伝えるには、印象的で記憶に残りやすく、実に効果的なデザインです。グリッドのルールを破ると、特定の要素に注目を集める効果もあります。例として、このBig CartelのWebサイトのデザインを見てみましょう。要素はグリッドに従って整列されていますが、いくつか例外的なデザイン要素があります。グリッドから飛び出ている要素が、強い垂直ラインのデザインを破ることで、人の視線を引く効果があります。 11. 柔軟性に富むグリッドがあなたのデザインに合うかどうか心配になりますか？全てのグリッドは柔軟性に富むので、デザインの変化にも対応できますから、心配する必要はありません。あなたがグリッドを作るときには、好きなだけカラムの数を選ぶことができるのは、グリッドの柔軟性の１つです。以下の例では、1カラムのデザインと、2または3カラムのデザインの比較を示しています。もちろん一般的には、デザイナーやデザインの必要性に応じて、最大13カラムの範囲でグリッドが構成されます。以下の例では、フルページサイズの画像と文字、そしてシンプルなレイアウトタイプを活かしたデザインで、1カラムのグリッドシステムとして完璧です。次のDesign Surgeryによるレイアウトのデザインは、13カラムで構成されています。所々に入っている画像と相まって、長くなりがちな記事の文章を効果的に魅せています。最終的にカラムの数はあなた次第です。ただ、カラムの数が多いほどデザインの柔軟性が高まり、数が少ないほどシンプルで柔軟性が低くなることも、デザインする時には心に留めておきましょう。 12. 対角線のデザインに役立つ文字通り、異なる角度からのデザインのアプローチにも、グリッドは役に立ちます。グリッドは水平または垂直に並べるだけではなく、対角線の軸上に配置しても、効果的です。 Andrew Ackroyd氏によってデザインされたポスターは、フォントと画像が対角線のグリッド上に並べられ、モダンでスタイリッシュな効果を生み出しています。対角線のグリッドは、画像の多いレイアウトにも役立ちます。Karen Hoffstetter氏によるこのデザインでは、対角線を活かしたフレームを使った画像で、全体が埋め尽くされたデザインです。またこのデザインでは、対角線のグリッドに加えて、水平方向と垂直方向グリッドも使われていることが、要素の美しい整列を可能にしています。 13. 万能に使えるグリッドが最も利用されているのは、雑誌や編集のレイアウトなどですが、その他のどんな用途にも、デザインツールとして活用できます。多くの有名なロゴは、グリッドシステムに基づいて作成されています。例えば、Braunの有名なロゴは、グリッドを使用して、文字をクリーンで強さのあるデザインに統一するプロセスから、誕生したのです。グリッドはまた、イラストレーション全般にも使うことができます。Dean Gorissen氏による、都市のイラストレーションでは、クリーンでシャープな角度が使われていますが、これが対角線のグリッドの形が利用されたことを示しています。どのような用途であれ、グリッドは、計り知れないほど便利なツールとなってくれるでしょう。全てのデザインスタイルやデザイナーにとって有益なツールではないかもしれませんが、多くのケースにおいては役に立ちます。あなたの次のプロジェクトでも、グリッドの活用を考えてみてください。 14. 余白のデザインに役立つあなたは余白を活かしたデザインの世界を深く掘り下げてみたいと思っていますか？グリッドは余白のデザインにも役立ちます。デザインを複数のカラムに分けて、要素を並べた後、残ったいくつかの列やカラムは空けたままにして余白を作りましょう。 João Oliveira氏によるこのレイアウトでは、グリッドのいくつかの領域を空けておくことで、余白を広く作っています。その結果として、スタイリッシュかつ洗練されたデザイン、機能的でミニマルなレイアウトが実現されていて、散らかりや不要な要素は全くありません。同様に、Mehmet Gozetlik氏によるポスターのデザインでも、グリッドの機能が活かされています。フォントと画像が中央のカラムに整列され、外側のカラムは余白にされています。美しくバランスが取られていて、要素が中央に集められた、視覚効果も高いポスターデザインです。 15. 読者の目に優しいデザイン活字印刷のレイアウトを読みやすくすることで、グリッドは、文章のデザインにも役立ちます。人間の目は、文章のまとまりの長さにとても敏感です。文章のまとまりが長すぎると、最後まで読み進めるのも辛くなりますが、短すぎても細切れな印象になり、しっかりと読み込むのが難しくなります。一般的に、行の黄金比は、1行あたり、単語数で6以上、合計文字数で空白も含めて約50～65文字になるとされています。文字の多いレイアウトにグリッドを使うことで、簡単に素早く均一なカラムを作ることができます。カラムを使うことで、文章の長さを強力にコントロールできます。これこそ、新聞でグリッドを基本としたレイアウトがよく使われている理由です。読みやすいコンテンツを作るのに役立っているのです。編集に関することをもっと学びたいと思いますか？「世界の編集デザインベスト50」のリストが紹介されているWebページを訪問して、目を通しておきましょう。次はあなたの番です：グリッドデザインを早速実践しましょうあなたがグリッドのファンであるなしに関わらず、非常に多くのデザインで役に立つことは明らかです。グリッドの起源は13世紀に遡るというのも、驚くにはあたらないことかもしれません。グリッドには、デザインのバランスを整えて整列することから、対角線のデザインでタイポグラフィーをクールに見せることに至るまで、数多くの活用方法があります。グリッドは、デザインのページ上のただの線ではありません。デザインを構造化し、デザインの方向性を示し、デザインを形作ることで、あなたの望む完成イメージを実現する力があるのです。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

Webデザイン

Photoshopで画像の背景を透明（透過）にする方法【初心者向け】現役デザイナーが解説

この記事では、Photoshopで画像の背景を透明にする方法を初心者の方にもわかりやすく解説します。画像を合成する際、不要な部分を「透過」の状態（何も描画されていない、透明の状態）にしなければいけない場合があります。 Photoshopの機能を使うと、簡単にきれいな透明（透過）処理を行うことができるので、ぜひ覚えておきましょう。目次JustinmindとはJustinmindの使い方Justinmindで何か作ってみる (※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。) 【動画の解説はこちら】田島悠介今回は透過について勉強するよ。画像合成には欠かせない要素なので必ず覚えておこう。大石ゆかり田島メンター！！透過っていうのは何ですか～？田島悠介レイヤーの中で、該当のピクセルに何も描かれていない状態のことを言うんだ。透過の部分にはその下のレイヤーの情報が適用されるよ。大石ゆかりなるほど、透明な部分ってことですね！人物写真の背景を透明にする以下の2つの作業を順を追って紹介します。大まかな範囲を選択する境界線調整ブラシツールで調整大まかな範囲を選択するまずは人物写真を使って、基本的な透過の方法を解説します。今回はこちらの画像を使用していきます。左のメニューから選択ツールアイコンを右クリックして「クイック選択ツール」を選びます。人物の形に沿ってドラッグしていきます。この際、Alt＋ドラッグで選択範囲の消去、Shift＋ドラッグで複数の選択範囲を作成できます。だいたい全体を選択した状態です。まだ髪などの細かい部分が選択できていないので調整していきます。「被写体を選択」コマンドを使う(※バージョン 21.2以降) ここまでの作業は、Photoshopのバージョン21.2以降の機能「被写体を選択」コマンドを利用すると、ワンクリックで選択できます。「クイック選択ツール」を選んだ状態で、対象が表示されているレイヤーを選択し、オプションバーの「被写体を選択」をクリックします。すると、人物に沿って選択範囲が作成されます。ここで選択されていない部分や選択を解除したい部分がある場合は、先ほどの「クイック選択ツール」で調整できます。境界線調整ブラシツールで調整では、髪などの細かい部分を選択していきます。オプションバーの「選択とマスク」をクリックし、「表示モード」を境界がわかりやすい「白黒」にしておきましょう。「エッジの検出」内の「スマート半径」にチェックを入れ、半径の長さを画面を見ながら調整します。 ※半径の値が小さければ境界がシャープになり、値を大きくするほど境界がソフトになります。 ※「スマート半径」にチェックを入れると、境界のシャープ〜ソフト具合をPhotoshopが自動で調整します。特に人物を選択する際に威力を発揮します。さらに境界を調整したい部分を指定するために、左メニューの「境界線調整ブラシツール」を選択します。髪などの細かい修正をしたい所を、塗りつぶすようにドラッグしてあげましょう。選択範囲の調整を終えたら、「出力設定」の「出力先」から「レイヤーマスク」を選択してOKボタンをクリックします。元の画面に戻り、レイヤーマスクで選択されていない部分が透過された状態になりました。髪の毛などの細かい部分も選択できています。基本的な透過の方法は以上です。田島悠介クイック選択ツールと「選択とマスク」を使った方法だね。大石ゆかりレイヤーマスクを使うことで、元の画像の情報を保持できるんですね。田島悠介消しゴムツールで消された部分なんかも透過になるよ。あと背景が1色だったりした場合はもっと簡単な方法があるんだ。大石ゆかりへー！どんなのですか？背景が1色の画像を透明にするロゴマークや文字列など、背景との境界がはっきりした画像で、背景が1色の場合はもっと簡単です。今回はこの画像を例にします。左メニューから消しゴムツールのアイコンを右クリックし、「マジック消しゴムツール」を選択します。オプションバーの設定項目の「隣接」にチェックが入った状態にしておきます。背景にしたい部分の中の適当なところをクリックします。すると、クリックした部分と同じ色の所がその場で透過状態に切り替わりました。また、この時「隣接」にチェックが入っていないと処理が少し変わってきます。試しに「隣接」のチェックを外してみましょう。「隣接」にチェックが入っているときとは違い、図形の中の白い部分まで透過になっているのがわかります。「隣接」にチェックを入れると同じ色が隣接している部分をすべて選択するのに対し、チェックを外すと画像全体で同じカラーのピクセルが選択されるようになります。文字列の背景を透過にしたい場合などでは、「隣接」のチェックを外しておくと便利です。 [PR] Webデザインで副業する方法とは手描きのイラストの背景を透明にする（線画抽出する）最後に、スキャンによって取り込んだ紙に描いたイラストなどを、加工しやすくするために背景を透明にする（線画を抽出する）方法です。ここではチャンネルを使用した方法と、クイックマスクを使用した方法の2つを解説します。線画を抽出する前の共通の手順です。スキャンした画像をPhotoshopで開き、スキャン時に入った大きな汚れなどをブラシツールで白く塗りゴミ取りをします。次に、「イメージ」から「色調補正」→「明るさ・コントラスト」を選択します。「明るさ」の部分を右に移動して画像を明るくすることで、さらに細かい汚れを消すことができます。これで下準備は完了です。チャンネルを使用した方法チャンネルパネルを表示し、「チャンネルを選択範囲として読み込む」をクリックします。すると、線画以外の白い部分が選択されました。この状態で、上メニューの「選択範囲」から「選択範囲を反転」をクリックします。選択範囲が反転し、線画の黒い部分のみが選択された状態になりました。レイヤーパネルにて、何もない新規レイヤーを作成します。元のレイヤーは左側にある目玉マークをクリックして非表示にしておきましょう。上メニュー「編集」→「塗りつぶし」を選択します。内容は「カラー」を選び、表示されたカラーピッカーで線画の色に使用したい色を選んだ上で、OKボタンをクリックします。線画の部分が塗りつぶされ、新規レイヤー上に線画を抽出することができました。クイックマスクモードを使用した方法線画を抽出する画像を開き、上メニュー「選択範囲」→「すべてを選択」をクリックします。上メニュー「編集」→「コピー」を選択します。レイヤーパネルで新規レイヤーを作成し、「編集」→「塗りつぶし」で線画の色に指定したい色で全面を塗りつぶします。そのレイヤーを選択した状態にし、元のレイヤー(下のレイヤー)は非表示にしておきます。左メニューの下から2番目にある「クイックマスクモードで編集」をクリックします。上メニュー「編集」→「ペースト」を選択します。画面では以下の画像のようになります。左メニューから先ほどと同じアイコンをクリックし、「クイックマスクモードで編集」から「画像描画モードで編集」に戻します。線画以外の部分が選択されました。上メニューの「編集」→「消去」を選択します。線画以外の部分が透過の状態になり、線画を抽出することができました。いかがでしたか？田島悠介最後に、スキャンした線画だけを残して他を透過にする方法を紹介したよ。大石ゆかりクイックマスクモードというのは、こういうこともできるんですね。田島悠介透過はレイヤーをうまく活用するためにも不可欠な機能なので、しっかり覚えておこう。大石ゆかりそうですね。ありがとうございます！ Photoshopを学習中の方へこれで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。

Photoshop

Photoshop（フォトショップ）で画像を切り抜く方法【初心者向け】

初心者の方でもAdobe Photoshopの使い方がわかる記事です。ここではPhotoshopで写真を切り抜いて加工する方法について解説します。目次JustinmindとはJustinmindの使い方Justinmindで何か作ってみる (※今回の作業はすべてAdobe Photoshop CCのバージョンでおこなっています) なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！画像同士を加工するので切り抜きをしたいのですが、なかなかうまくいかなくて…… 田島悠介切り抜きの方法は、対象の形や周りとの色の関係などによっていろいろと使う機能も違ってくるよ。画像の状態によって方法を使い分けてみよう。大石ゆかり具体的にはどういうところを見ればいいんですか～？田島悠介そうだね、まずは一番簡単な自動選択ツールが使えるケースについて考えてみよう。自動選択ツールを使った切り抜き以下のような、切り抜きたい対象と背景とのコントラストが明確な場合は、「自動選択ツール」を使用することで簡単に切り抜きを行えます。まずは対象の画像をPhotoshopで開き、レイヤーパネルを確認します。レイヤー名が「背景」である場合は、レイヤーを右クリックし「背景からレイヤーへ」を選択して通常レイヤーへ変換しておきましょう。次に、左のツールパネルから選択ツールのアイコンを右クリックし、「自動選択ツール」を選択します。画面内の、切り取る対象以外の背景箇所でクリックします。 ※対象の方が単色に近い場合は、対象の内側をクリックし、上部メニュー「選択範囲」の「選択範囲を反転」を選び、対象以外が選択された状態にしておきましょう。自動選択ツールでは「許容値」の値が大きいほど選択される範囲が広くなり、小さいほど狭くなります。許容値は以下の項目から調整することができます。選択範囲が作成されたら、上部メニュー「編集」から「消去」を選択します。切り抜きたい部分以外が透過の状態になりました。レイヤーマスクの利用レイヤーマスクを追加することで、切り抜きたい部分以外を消去せずに元画像を保持したまま切り抜くことができ、容易に修正ができるようになります。レイヤーマスクを利用するときは、切り抜きたい部分を選択した上で、レイヤーパネルのアイコン「レイヤーマスクを追加」をクリックします。ペンツールを使った切り抜き周囲とのコントラストがあいまいな場合や自由な形の切り抜きを行いたいときは、ペンツールを使用した方法が有効です。今回は以下の画像を用いて、右側のカップを切り抜いていきます。先ほどと同様に、レイヤー名が「背景」である場合は、レイヤーを右クリックし「背景からレイヤーへ」を選択して通常レイヤーへ変換しておきましょう。左のツールパネルのペンツールのアイコンを右クリックし、「ペンツール」を選択します。画面左上の「ツールモードを選択」は「パス」を選択しておきましょう。 ※ペンツール選択時、初期設定では「シェイプ」と表示されています。切り抜きく対象の輪郭をクリックしてアンカーポイントを追加していきます。このとき、対象の1〜2pxほど内側を選択していくときれいに切り抜くことができます。パスの最後は開始点をクリックし、対象をパスで囲むことができました。次に、レイヤーパネルが表示されている付近のタブ「パス」をクリックし、パスパネルを表示させます。パスパネルのタブが見つからない場合は、上部メニュー「ウィンドウ」から「パス」を選択し表示させましょう。パスパネル下部にある「パスを選択範囲として読み込む」アイコンをクリックします。パスが変換され、対象に沿った選択範囲が作成できました。切り抜く対象以外の部分を透過の状態にします。上部メニュー「選択範囲」から「選択範囲を反転」をクリックします。さらに、上部メニューの「編集」から「消去」を選択します。対象以外の部分が透過になりました。大石ゆかり自動選択ツールがうまくいかない場合は、パスを使うんですね。田島悠介対象のちょっとだけ内側をなぞるようにすると、合成後の画像で余白が目立たなくなるよ。大石ゆかり人物とか、複雑な輪郭のものだとこのやり方は大変そうですね…… 田島悠介そういうときは「境界線を調整」を使おう。この機能ではかなり細かい部分まできれいに切り取れるようになるんだ。 [PR] Webデザインで副業する方法とは「境界線を調整」機能を使った切り抜き「境界線を調整」という機能を使うことで、比較的簡単に複雑な形状を切り抜くことが可能です。こちらの画像の人物の部分を切り抜いてみましょう。ツールパネルの選択ツールアイコンを右クリックし、「クイック選択ツール」を選びます。選択したい部分を内側からドラッグすると、自動で選択範囲が作成されます。はみ出した部分はAlt（option）を押しながらドラッグすることで解除できます。下の画像のように選択したい部分が離れて複数ある場合は、Shiftを押しながらドラッグすることで追加選択できます。また、選択範囲の追加と削除は、上のメニューからツールアイコンをクリックすることで切り替えることもできます。以下はサンプル画像の切り抜きたい部分を選択した状態です。ここからは髪の毛の部分を切り抜いていきます。より詳しく知りたい方は、Photoshopで髪の毛をきれいに切り抜く方法もあわせてご覧ください。選択ツールを選んだ状態で、オプションバーにある「選択とマスク」をクリックします。「表示モード」を「白黒」にしてみましょう。髪の毛やまつ毛などの部分が選択されていない状態であるのが分かります。次に、同じように「表示モード」の「レイヤー上」をクリックします。「スマート半径」を選択し、大きさを調整します。境界線調整ブラシツールに持ち替え、髪の毛とまつげの境界部分をドラッグします。再び「表示モード」の「白黒」で見ると、髪の部分が選択された状態になっているのが分かります。「出力先」から「新規ドキュメント」を選びOKを押します。人物の部分だけ切り抜きされ、背景が透明の画像が新規に作成されます。この模様は透過（透明）の状態（なにも描画されていない状態）を表しています。背景に色をつけてみましょう。ここでは「背景レイヤー」という名前のレイヤーを新規追加しています。レイヤーの順番を入れ替えます。（背景レイヤーが下になるようにします）「背景レイヤー」をツールパネルの「塗りつぶしツール」で塗りつぶした状態です。背景レイヤーは目的やデザインの雰囲気に合わせて編集してみましょう。いかがでしたか？ぜひバナー作成などにチャレンジしてみてください。田島悠介「境界線を調整」を使ったやり方は以上だよ。大石ゆかり髪の毛まできれいに切り取れちゃいました！田島悠介自動選択だけでできるものならこの機能は必要ないときもあるかもしれないし、逆に人物などをパスや自動選択でやろうとすると大変になる。画像の状態によってツールを使い分けよう。大石ゆかり対象をよく見て方法を選ぶのが大事ですね。ありがとうございました！ Photoshopを学習中の方へこれで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。

Photoshop

今すぐ設定できる！Javaの開発環境の構築方法(Windows編)【初心者向け】

Javaの開発環境の構築方法について解説しています。Eclipseを使ってJavaでのプログラミングができるように設定していきましょう。 Javaについてそもそもよく分からないという方は、Javaとは何なのか解説している記事をまずご覧ください。なお本記事は、TechAcademyのJava講座の内容をもとに作成しています。田島悠介今回は、Eclipseを使ったJavaの開発環境の構築手順を見てみよう。大石ゆかり田島メンター！！Eclipseというのは何ですか～？田島悠介 Eclipseは総合開発環境(IDE)のひとつで、Javaやそれ以外のたくさんの言語に対応しているんだ。今回はWindowsでのインストール方法を解説していくよ。大石ゆかりよろしくお願いします！目次事前準備 Javaのインストール Eclipseのインストール Eclipseを日本語化初期設定の手順入れておくと便利なツール事前準備 Eclipseを動作させるためには、JRE1.7以上が必要です。JREが17.以上がインストールされている場合は、「Javaのインストール」を読み飛ばしてもかまいません。今回は、コマンドでのJavaの実行もできるように、JDKをインストールしておきます。また、Windows10を使用していますが、Windows7、8でも同様の手順でインストール可能です。 ※ライセンスについて Java自体はオープンソースであり、オープンソース版のJDKとして無償で利用できるOpenJDKが存在しています。 Javaのライセンス自体はOracle社が保有しており、Oracle社が提供するJDKはOpenJDKと区別できるよう、OracleJDKと呼ばれています。OracleJDKは2019年4月16日以降「個人的な使用や開発目的に限り無償」、企業での使用などそれ以外は「有償」に変更となりました。 OpenJDKとOracleJDKは基本的には「同一」であり、セキュリティパッチの提供期間がOpenJDKの方が短い、という違いがあります。本記事では機能が同一であり、個人使用や開発では無償で利用できることから、OracleJDKのインストール方法を紹介しています。 OpenJDKを利用したい場合は、以下の公式サイトからダウンロードします。 jdk.java.net [PR] Webデザインで副業する方法とはJavaのインストール事前準備まずは、32bitと64bitでダウンロードするファイルが異なるので、パソコンのビット数を確認しておきましょう。デスクトップの左下のWindowsのマークを右クリックして、システムをクリックします。システムの種類のビット数をメモしておきます。 JDKのダウンロード Javaの開発環境であるJDK(Java SE Development Kit)をダウンロードします。 ※以下の手順では最新版のJDKがダウンロードされます。過去のバージョンのJDKは以下のサイトからダウンロードできます。過去のバージョンのJDKをダウンロードする： Oracle Java Archive それでは最新版のJDKをダウンロードしましょう。Javaのページにアクセスして、「無償で試す」をクリックします。「JDK Download」をクリックします。 Windows x64 Installerの右側にある「jdk-14.0.1_windows-x64_bin.exe」をクリックします。「I reviewed and…」にチェックを付けてダウンロードボタンをクリックします。 JDKのインストールダウンロードしたインストーラを実行し、次へをクリックします。後でパスを設定するときに必要なので、インストール先をメモしましょう。次へをクリックします。インストールが実行されます。閉じるをクリックしてインストール完了です。環境変数の設定次は、インストールしたJavaを使うための、環境変数を設定します。デスクトップの左下のWindowsのマークを右クリックして、システムをクリックします。システムの詳細設定をクリックします。環境変数をクリックします。システム環境変数のPathを選択して、編集をクリックします。新規をクリックし、インストール時にメモしたパスに「bin」を追記して入力します。入力が終わったらOKをクリックします。環境変数の画面に戻るので、OKをクリックします。システムのプロパティの画面もOKをクリックして、設定を完了します。動作確認最後に、動作確認を行いましょう。動作確認はコマンドプロンプトでjavacを使い、バージョンを表示することで確認できます。デスクトップの左下のWindowsのマークを右クリックして、ファイル名を指定して実行をクリックします。「cmd」と入力し、OKをクリックします。コマンドプロンプトの画面に、「javac -version」と入力し、Enterキーを押します。以下のように「javac 14.0.1」などとバージョンが表示されれば、JDKのインストール確認完了です。 ※表示されるバージョンはインストールしたJDKのバージョンにより異なります。大石ゆかり EclipseじゃなくてJDKというのをダウンロードするんですか？田島悠介 JDKはJavaの開発環境なんだ。総合開発環境の前にこちらをインストールしておくよ。大石ゆかり分かりました！次はどうしたらいいんでしょう？田島悠介今度はEclipseの方をダウンロード・インストールするよ。手順を見てみよう。 Eclipseのインストール Eclipseのダウンロードページにアクセスして、インストーラをダウンロードします。 Download の「Windows 64bit」をクリックします。もう一度、Downloadをクリックすると、ダウンロードが始まります。ダウンロードしたインストーラ(eclipse-inst-win64.exe)を実行します。 Eclipse IDE for java Developersをクリックします。後で日本語化する時に使うので、Installation Folder(インストールフォルダ)をメモしておいてください。メモをとったら「INSTALL」をクリックします。 Accept Nowをクリックします。インストールが完了するまで数分待ちましょう。以下のような画面になったらインストール完了です。 LAUNCHをクリックしてEclipseを起動します。ワークスペースを指定します。特に指定がなければ、そのままLaunchをクリックします。 Eclipseが起動しました。英語のメニューになっていますので、次は日本語化してみましょう。一旦、Eclipseは終了しておいてください。 Eclipseを日本語化日本語化するためにPleiadesというプラグインを導入します。 Pleiadesのダウンロードページにアクセスして、Windowsをクリックします。以下のリンクをクリックします。ダウンロードしたzipを解凍します。解凍により出てきたsetup.exeを実行します。選択ボタンを押し、Eclipseをインストールしたフォルダの中にある「eclipse.exe」を選択します。選択が終わったら「日本語化する」をクリックしましょう。日本語化が完了したら、Eclipseをインストールしたフォルダに有る「eclipse.exe -clean.cmd」を実行します。以下のように、日本語化されたEclipseが起動します。次回以降は、デスクトップのEclipseのショートカットから起動すれば、日本語化された状態で起動します。初期設定の手順それではEclipseを使ったJavaプロジェクトの作成と実行方法について確認しましょう。「ようこそ」のタブは閉じます。 Eclipseではプロジェクトと呼ばれるまとまりを作成し、その中にパッケージやソースコードを作成していくことでプログラミングを行います。ファイルメニューから新規>Javaプロジェクトをクリックします。プロジェクト名を適宜設定します。半角英数字で指定しましょう。漢字などの日本語は使用できません。入力したら「完了」をクリックします。以下のような画面になります。次に「src」を右クリックし、新規 > パッケージをクリックします。パッケージ名を適宜設定します。こちらも半角英数字で指定しましょう。入力したら「完了」をクリックします。作成したパッケージを右クリックし、新規>クラスをクリックします。名前を適宜設定します。また「public static void main(String[] args)(V)」にチェックを付けます。入力したら「完了」をクリックします。以下のような画面になります。「MyProject1」の中に「mypkg」というパッケージを作成し、さらにパッケージの中にJavaのソースコード「MyClass1.java」を作成した状態です。「.java」の部分は拡張子と呼ばれ、ファイルの種類を表しています。 Javaのプログラムの拡張子は「.java」となります。それでは簡単なソースコードを入力しましょう。 MyClass1の「// TODO 自動生成された…」の下に以下のように入力します。 System.out.println("こんにちは！Javaプログラミング！"); 入力が終わったら実行してみましょう。ツールバーの実行ボタンをクリックします。以下のように実行結果が表示されれば成功です！正しく動作しない場合、入力ミスなどが無いか確認しましょう。入れておくと便利なツール Eclipseには「プラグイン」と呼ばれる機能拡張の仕組みが存在します。例えば、前述した日本語化もPleiadesというプラグインを導入することで実現しています。以前は機能毎に後からプラグインを導入する必要がありましたが、最近のEclipseではあらかじめ主なプラグインが導入済となっています。ここでは導入しておくと便利な設定の1つとしてダークモードを紹介します。またプラグインのインストール、インストール済プラグインの確認方法についても見ていきましょう。ダークモード最近はOSや多くのエディタなどでも取り入れられているダークモードですが、Eclipseでも対応しています。 Eclipseでダークモードを設定するにはウィンドウメニューから設定を選択し、一般>外観でルック＆フィールを「ダーク」に選択します。設定後はEclipseを再起動すると良いでしょう。起動すると以下のようにダークモードが適用されます。プラグインの導入方法新たなプラグインを導入するには、ヘルプの「新規ソフトウェアのインストール…」をクリックします。作業対象を「すべての使用可能なサイト」とし、名前からプラグインを選択します。今回はデータベースPostgreSQL用のプラグインを選択しました。確認画面が表示されます。次へをクリックします。ライセンスに同意し、完了をクリックします。しばらくするとプラグインのインストールが完了します。導入済プラグインの確認方法導入済のプラグインを確認するには、ヘルプから「Eclipse IDE について」をクリックします。表示された画面の「インストール詳細」をクリックします。以下のようにインストール済のソフトウェアやプラグインを確認することが出来ます。以上、WindowsでJavaのEclipseを使った開発環境の構築と動作確認ができました。実際にJavaでプログラミングをしようと思ったら準備するものが多いと感じるかもしれませんが、一連の作業を終えれば実際にプログラミングをすることができます。田島悠介以上でJavaの開発環境構築とEclipseの日本語化は完了だよ。大石ゆかり Pleiadesの導入がちょっと難しそうですね…… 田島悠介このような環境構築はバージョンが変わったりするとやり方も変化する場合があるので、うまくいかない場合は新しい情報もチェックしてみよう。大石ゆかり調べながらやるのが大事ってことですね。ありがとうございました！ Javaの学習サイトもまとめているので、合わせてご覧ください。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。 [お知らせ]オンラインのプログラミングスクールTechAcademyでは、Java講座を開催しています。JavaやServletの技術を使ってWebアプリケーションの開発を学ぶことができます。現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートします。

Java

JavaScriptで複数のプルダウンメニューを連動させる方法を現役エンジニアが解説【初心者向け】

JavaScriptで複数のプルダウンメニューを連動させる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介複数のプルダウンメニューを連動させる方法について詳しく説明していくね！大石ゆかりお願いします！プルダウンメニューとはプルダウンメニューとは、複数の選択肢の中から1つを選んでもらう際に利用するメニューです。選択前にはデフォルト状態の選択肢が表示されており、プルダウンメニューをクリックすることによって選択肢一覧が表示され、選択肢の中から1つを選択すると、選択した要素がその後表示され続けるというものです。 webページでは性別を選択してもらうときや、住んでいる県を選択してもらう際によく利用します。プルダウンメニューの設定方法プルダウンメニューを配置するにはselectタグで利用し、選択肢をoptionタグで配置していきます。以下は性別を選択するためのプルダウンメニューを配置しています。 <select name="gender"> <option value="">選択してください <option value="0">男性 <option value="1">女性 </select> このように設定すると選択肢の一番上の要素である”選択して下さい”が選択された状態で表示されますが、以下のようにselected要素を設定することで初期の選択状態を変更することが可能です。 <select name="gender"> <option value="">選択してください <option value="0" selected>男性 <option value="1">女性 </select> このようにすると”男性”が選択された状態で表示されます。 [PR] Webデザインで副業する方法とは複数のプルダウンメニューを連動させる方法複数のプルダウンメニューを連動させたい場合もあるでしょう。例えば、住所を選択するフォームを作成した際に、選択した県によって市の選択肢を変更したい場合などです。 JavaScriptを使えばこういった場合に複数のプルダウンメニューを連動することによって、ある選択肢を選択した際には別のプルダウンメニューに任意の選択肢を表示させることが可能です。実際に書いてみよう今回は好きな食べ物を入力してもらうフォームを作成し、食べ物のカテゴリを選ぶとカテゴリにあった食べ物の選択肢が表示されるようなものを作成してみましょう。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>好きな食べ物</title> <script src="script.js"></script> </head> <body> <p>食べ物のジャンル</p> <select name="category" id="category"> <option value="">選択してください</option> <option value="0">和食</option> <option value="1">アジア料理</option> <option value="2">ヨーロッパ料理</option> </select> <p>好きな食べ物</p> <select name="food" id="food"> <option value="">選択してください</option> </select> </body> </html> script.js window.onload = function() { // 好きな食べ物の選択肢 food = document.getElementById("food"); // ジャンルの選択肢が変更された際の動作 category = document.getElementById("category"); category.onchange = changeCategory; } // ジャンルの選択肢が変更された際の動作 function changeCategory() { // 変更後のカテゴリを取得 var changedCategory = category.value; if (changedCategory == "0") { // カテゴリに和食が選択された場合 setJFootds(); } else if (changedCategory == "1") { // カテゴリにアジア料理が選択された場合 setAsianFoods(); } else { // カテゴリにヨーロッパ料理が選択された場合 setEuropeFoods(); } } // 和食の選択肢を設定する function setJFootds() { // 好きな食べ物の選択肢を空にする food.textContent = null; // 和食の選択肢 var jFoods = [ {cd:"", label:"選択して下さい"}, {cd:"0", label:"寿司"}, {cd:"1", label:"おでん"}, {cd:"2", label:"そば"} ]; jFoods.forEach(function(value) { var op = document.createElement("option"); op.value = value.cd; op.text = value.label; food.appendChild(op); }); } // アジア料理の選択肢を設定する function setAsianFoods() { // 好きな食べ物の選択肢を空にする food.textContent = null; // アジア料理の選択肢 var asianFoods = [ {cd:"", label:"選択して下さい"}, {cd:"3", label:"インドネシア料理"}, {cd:"4", label:"ベトナム料理"}, {cd:"5", label:"インド料理"} ]; asianFoods.forEach(function(value) { var op = document.createElement("option"); op.value = value.cd; op.text = value.label; food.appendChild(op); }); } // ヨーロッパ料理の選択肢を設定する function setEuropeFoods() { // 好きな食べ物の選択肢を空にする food.textContent = null; // ヨーロッパ料理の選択肢 var europeFoods = [ {cd:"", label:"選択して下さい"}, {cd:"6", label:"イタリア料理"}, {cd:"7", label:"カリフォルニア料理"}, {cd:"8", label:"モロッコ料理"} ]; europeFoods.forEach(function(value) { var op = document.createElement("option"); op.value = value.cd; op.text = value.label; food.appendChild(op); }); } それでは、ソースコードの解説を行っていきます。まずindex.htmlですが、食べ物のジャンルのセレクトボックスと好きな食べ物のセレクトボックスを配置しています。好きな食べ物のセレクトボックスの選択肢は食べ物のジャンルが選択された際にjavascriptにて追加していくので初期状態の選択肢のみ用意しておきます。次にscript.jsの解説です。window.onloadにhtmlが読み込み終わった際に行われる動作を設定していきます。ここでは選択肢をプログラム上で操作するためにdocument.getElementByIdで各セレクトボックスを取得しています。また、食べ物のジャンルが変更された際にchangeCategory()関数が呼ばれるよう設定しています。changeCategory()関数では、選択された選択肢によって好きな食べ物のセレクトボックスの中身を入れ替えています。実際の入れ替え処理はsetJFoods()、setAsianFoods()、setEuropeFoods()の各関数内で行っています。入れ替え処理用の各関数内で行っている処理の流れはすべて同じで、選択肢要素の配列を作成、選択肢の数だけ好きな食べ物のセレクトボックスに追加という処理を行っています。いかがでしたでしょうか、このようにJavaScriptを使うことによってhtml上の要素を自由に操作することができます。今回の記事を参考にぜひいろいろな動作の実現にチャレンジしてみてください！監修してくれたメンター黒木一志（くろきかつし） TechAcademyジュニアのゲームアプリコースを担当しています黒木です。現在は会社員としてシステムエンジニアをしております。会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

WordPressの使い方！初心者でもサイト作成が簡単に｜現役エンジニアが解説

WordPressを使用するとデザインの変更や機能のカスタマイズ、データの管理を手軽に行える多機能なブログサービスを作成することができます。実際、このTechAcademyマガジンもWordPressを使って作られたサイトです。他にも企業のコーポレートサイトやブログサイトなどの多くはWordPressを使われているのです。サイト作成に便利なプラットフォームなので、ぜひ使えるように理解していきましょう。そもそもWordPressとは何なのかよく分からない方は、今さら聞けない！WordPressとは【初心者向け】をご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。大石ゆかり田島メンター！！WordPressのことはなんとかわかったんですけど、どうやって使うんですか〜？田島悠介 WordPressを使うにはインストールや初期設定が必要なんだ。大石ゆかりなんだか難しそうですね・・・。田島悠介きちんと手順に従えば簡単にできるよ。インストールさえしてしまえば、簡単に記事の作成とかサイトデザインとかもできるから。それじゃあ教えてあげるね。大石ゆかりよろしくお願いします！！！目次 WordPressのインストール手順初期設定とインストール WordPress管理画面の基本設定記事の投稿方法カテゴリーとタグの管理ユーザー管理パーマリンクの設定テーマの使い方プラグインの使い方 WordPressで知っておきたいその他の設定 WordPressのインストール手順用意するもの PHP・MySQLが使用できるサーバー(レンタルサーバーなど) 以下の条件があります。 PHP バージョン 7.4 以上 MySQL バージョン 5.6 以上または MariaDB バージョン 10.1 以上 HTTPS対応 (2020年6月時点) FTPクライアント(今回はFileZillaを使用します) 独自ドメイン(yahoo.co.jpのように自分のサイトを公開する場合に必要です) 独自ドメイン、レンタルサーバーについては別途記事内で比較しています。合わせてご覧ください。本体の入手とサーバーへのアップロードまずはWordPressの公式サイトのダウンロードページにアクセスしましょう。 WordPress – ダウンロード以下のボタンをクリックしてWordPress本体をダウンロードします。ダウンロードし、解凍した「wordpress」という名前のフォルダを任意の半角英数字の名前に変更します。ここではwpとしています。(変更せず、「wordpress」のままでもOKです) FTPクライアントを使用してサーバーに本体をアップロードします。今回はFileZillaを使用します。サーバーに接続し、WordPressを設置したい場所にフォルダごとアップロードします。アップロードしたフォルダのある場所にアクセスします。※ ※例えばhttp://xxxx.ne.jp/に「wp」と名前変更したWordPressフォルダをアップロードした場合、アクセスする場所はhttp://xxxx.ne.jp/wpとなります。また、これがそのサイトのアドレスになります。 [PR] Webデザインで副業する方法とは初期設定とインストールデータベースの設定を行います。「さあ、始めましょう！」のボタンをクリックします。データベース名・ユーザー名・パスワード・データベースのホスト名を入力し、「送信」ボタンをクリックします。これらは使用しているレンタルサーバーにより設定が異なります。以下は、レンタルサーバーのスターサーバーでの例です。(管理画面の「データベース設定」から見ることができます) パスワードはこのデータベースで設定したものを入力します。また、データベースの文字コードは「UTF-8」にしておきます。「インストールを実行」をクリックします。ここではWordPressサイトの基本的な設定を行います。また、これらの項目は全て後でいつでも変更できます。「検索エンジンがサイトをインデックスしないようにする」にチェックを入れるとサイトが検索エンジンに表示されない状態にしておくことができます。テスト導入時などにチェックします。入力後「WordPressをインストール」をクリックします。インストール完了のメッセージと、ログイン用のユーザー名とパスワードに関する情報が表示されます。続いてログイン画面が表示されます。設定したユーザー名とパスワードを入力し「ログイン」をクリックします。管理画面の基本設定ログインするとWordPressの管理画面が表示されます。記事の投稿やサイトデザインの変更、プラグインの追加や各種設定はこの画面から行います。サイトの基本情報変更左メニューの「外観」から「カスタマイズ」を選択します。「サイト基本情報」を選択します。サイトのタイトルとキャッチフレーズはここからいつでも変更できます。ログイン・ログアウト方法管理画面からログアウトする場合は上メニューのユーザー名から「ログアウト」を選択します。再び管理画面にログインするときはサイト上の「ログイン」(テーマにより表示されないものもあります)か、WordPressフォルダ内にあるwp-login.phpにアクセスすることでログイン画面に移行することができます。※ ※例えばhttp://xxxx.ne.jp/wpというサイトの場合はhttp://xxxx.ne.jp/wp/wp-login.phpがログイン画面へのアクセスになります。記事の投稿左メニューの「投稿」から「新規追加」を選択します。「タイトルを追加」の部分にタイトル、「文章を入力、または…」の欄に本文を入力します。なお、WordPressではバージョン5.0からエディタが「ブロックエディター」に変更になっています。この記事でもブロックエディターの説明を行っています。また、/ を入力するか、+ボタンを押すことで画像などのコンテンツを挿入することができます。入力が完了したら「公開」ボタンをクリックすると記事がサイトに反映されます。予約投稿の方法「公開」ボタンを押せば、その瞬間記事として公開されますが、中には決まった時間に公開したいと思う人も多くいるでしょう。公開ボタンを押した画面の下に表示されている「公開：今すぐ」をクリックします。カレンダーが表示され、日時を自由に決めることができます。トップページには出したくないから過去の記事として公開したい、明日の9時に公開したいので、予約投稿にする際に便利です。今より先の時間に設定すると、「公開」から「予約投稿」というボタン名に変わります。設定した時間になったら自動的に公開されるので、時間に合わせて手動で公開する必要がなく便利な機能でしょう。カテゴリとタグの管理 WordPressでは投稿した記事を分類するために、カテゴリーやタグを利用することが出来ます。一般的に、カテゴリーは、記事を大まかにグループ分けする場合に使われ、タグはさらに細かく分ける場合に用いられています。 WordPressで投稿する記事は、必ずカテゴリーを選択しなければなりませんが、タグは必ずしも設定しなくてもよいことになっています。新規カテゴリーの作成方法ログインした後、「投稿」から「カテゴリー」を選択すると、カテゴリー新規追加、既存のカテゴリー編集の画面が開きます。名前にカテゴリー名を書いて、下のほうにある新規カテゴリーを追加ボタンを押すと、新規カテゴリーが追加されます。スラッグというのは、カテゴリーのアドレスにつける別名みたいなものです。スラッグを設定しない状態で、未分類のカテゴリー一覧の記事を表示した場合、アドレスが以下のようになります。 http://あなたのHPのURL/category/%E6%9C%AA%E5%88%86%E9%A1%9E/ ブラウザのURLを見てみると、 http://あなたのHPのURL/category/未分類/ と表示されていますがそれはブラウザが気を利かせて、日本語に変換してくれただけで、本当はURLエンコードされた日本語文字列になっています。コピーしてテキストエディタや掲示板などの入力欄に貼り付けるとわかります。未分類のカテゴリーに対して、not-categoryなどのスラッグをつけると「http://あなたのHPのURL/category/not-category/」でアクセスできるようになります。また、カテゴリーに親カテゴリーを指定することで、カテゴリーに階層構造を持たせることも出来ます。新規タグの作成方法ログインした後、「投稿」から「タグ」を選択すると、タグの新規追加、既存のカテゴリー編集の画面が開きます。タグもカテゴリーと同じで、スラッグを利用することが出来ます。タグは、記事投稿時に複数設定することが出来るので、該当するものを設定しましょう。ユーザー管理 WordPressでは、複数人で管理することも出来て、それぞれ権限を設定することでセキュリティを向上させることが出来ます。管理画面のユーザーをクリックすると、新規登録・編集画面になります。権限グループごとに何ができるのか新規追加の前に、権限について見ていきます。権限には以下の5種類のグループがあります。購読者 WordPressにログインすることが可能。プロフィールの変更が出来る寄稿者記事を投稿できる。ただし、編集者や管理者が許可しない限り公開状態には出来ません投稿者記事を投稿できるが、他のユーザーが作成した記事は扱えないことと、固定ページ作成は出来ない編集者他のユーザーが作成した記事や固定ページなども扱えるが、デザインやプラグインなどWordPressの設定に関わるものは扱えない管理者全ての権限があるとなっています。寄稿者は記事を投稿できるものの、公開状態にするには編集者以上の権限を持つユーザーの許可が必要。投稿者は、記事を投稿できるものの、カテゴリーなどの作成や管理権限が必要なもの、他のユーザーが作成した記事の編集は行えません。編集者は、ほとんど全ての作業が可能ですが、設定にかかわるものは変更できないです。管理ユーザーに権限を設定することで、複数人の管理人がいてもセキュリティが守られるようになっています。新規ユーザーの登録方法管理画面の「ユーザー」をクリックすると、登録されているユーザー一覧が表示されます。ページトップに「新規追加」ボタンがあるので、こちらをクリックしましょう。必要な情報を設定した後、権限を決めて追加ボタンを押すと追加できます。権限を間違えると、全ての記事が削除されてしまう恐れもあるので注意が必要です。ユーザーの削除方法管理者の権限を持つユーザーでログインすると、削除することが出来ます。パーマリンクの設定パーマリンクでは、記事ページなどのURLをカスタマイズすることができます。「設定」から「パーマリンク設定」でパーマリンクの編集を行うことができるので、確認してみましょう。 URLとは、通常であれば、ファイルの場所を示しています。例えば、URLが http://ほにゃらら.com/aisatsu/ohayou.html だった場合「aisatsu」というフォルダの中の「ohayou.html」というファイルの情報が返されます。ところがWebサーバーの設定でこれを変更することが出来ます。WordPressのインストール先のフォルダに.htaccessファイルがあります。中身について詳細は解説しませんが、要求したファイルやフォルダがない場合、全てのアクセスを「index.php」というファイルに集める、という設定になっています。index.phpにアクセスを集めて、ブラウザのアドレスから判断して、プログラムでデータベースから検索して結果を表示しています。 WordPressのデフォルトの設定では、2020年6月24日に投稿した場合のURLは、 http://あなたのURL/2020/06/24/hello-world/ などのようになっています。この/2020/06/24/hello-world/の部分が、パーマリンクになります。デフォルトでは、日付と投稿名でデータベースから記事を取得しているようです。この部分をある程度自由に変更することが出来ます。パーマリンクの変更パーマリンクを変更した場合、どのようにURLが変わるのかを見てみます。パーマリンクの設定の変更画面は、管理画面から設定、パーマリンク設定をクリックします。デフォルトの状態は、日付と投稿名です。2020年の6月に投稿した記事であれば、 /2020/06/投稿した記事のタイトル/ というURLになります。基本に設定すると「/?p=123」という、記事に設定されている番号が付けられます。これはデータベース上で管理されている、その記事唯一の番号です。月と投稿名だと「/2020/06/投稿した記事のタイトル/」になります。数字ベースだと「/archives/123」といった形になります。投稿した記事のタイトルだけという設定もあり「/投稿した記事のタイトル/」というURLにすることも可能です。パーマリンクのカスタム構造パーマリンク設定では、自分でカスタマイズすることもできます。構造タグというものを使用します。詳しくは使い方を参照してください。カテゴリーベースを変更することも出来ます。カテゴリーベースのところを.(ドット)にすると「/category/カテゴリー名/」になるURLが「/カテゴリー名/」に短縮することも出来ます。ただし、その場合投稿記事のパーマリンクが「/記事のタイトル/」になっていた場合、重なる可能性があります。記事の投稿名がhello-worldで、カテゴリーにhello-worldがあった場合どうなるでしょうか？どちらも http://あなたのURL/hello-world/ でアクセスできてしまいます。この場合、投稿した記事が優先して表示されてしまい、カテゴリー一覧が表示されなくなるので注意が必要です。テーマ WordPressは「テーマ」という機能によりサイトのデザインを簡単に変更することができます。各種テーマは公式が作成したものやユーザーが公開しているものが使用できます。個人や企業でWordPressのテーマを作っているところも多いので、費用をかけなくても十分整ったサイトを作ることができるはずです。テーマの変更方法左メニューの「外観」から「テーマ」を選択します。インストール済みのテーマの一覧が表示されます。上の「新規追加」かテーマ一覧内の「新しいテーマを追加」をクリックします。テーマは新着や人気順から探せる他、右上の「テーマを検索」からキーワードを指定して見つけることができます。テーマをインストールし、一覧画面から「有効化」をクリックするとサイトに反映されます。テーマの例「WP Portfolio」テーマは、ポートフォリオ作成に適したテーマです。記事作成時にアイキャッチに指定した写真やイラストなどを一覧できるため作品を見せやすくなっています。おすすめのテーマ各シチュエーションで使えるWordPressのテーマを紹介します。国内ではブログサイトやコーポレートサイトをWordPressで利用している企業が多いですが、海外ではECサイトなどもテンプレートが用意されているので、ぜひ使ってみてください。以下では、ブログサイト、ECサイト、コーポレートサイトに分けてそれぞれ人気のテーマを紹介しています。ブログサイトアルバトロスかなり多くのブロガーが利用しているオープンケージのWordPressのテーマ。その中でも王道のアルバトロスをおすすめしたいと思います。有料ではありますが、技術的なスキルが全くない人でも簡単におしゃれなWebサイトを作れるのが大きな特徴です。カスタマイズもかなり自由に行えますし、一度買ってしまえばずっとサイトを運営できるので、多くのブロガーから人気なのでしょう。アルバトロス賢威 SEOに強いブログ・サイトを作りたい方におすすめのテーマです。ウェブライダーという様々な企業のSEOコンサルを担ってきた会社が開発を行っています。サイトのテーマだけでなく、SEOに関するマニュアルも載せているので、集客にも力を入れたい人にとっては一石二鳥なテーマになるはずです。賢威 Riba Lite 画像のサムネイルが大きくバックに表示されているタイプのサイトです。カメラでよく写真を撮ったり、トップページで写真を強調させたいときにおすすめのテーマです。ダウンロード / DEMO Hueman よく見るニュースサイトのような作りになっているテンプレートです。サイドメニューも充実しており、どこに何を置くか難しい技術を使わなくても選択するだけで設定することができます。個人のブログサイトとしても活用できるので、ぜひ活用してみてください。ダウンロード / DEMO ECサイト Shop Isle wordPressでECサイトを構築する際は、WooCommerceプラグインを使うのが定番です。WooCommereに特化したテーマの1つがShop Isleです。様々な効果を適用でき、ECサイトだけでなくビジネスサイトとしても活用できます。より高機能のPRO版も存在します。ダウンロード / DEMO YITH Proteo ファッションやアパレル系のECサイトにおすすめです。カテゴリも細かく設定できますし、洋服などを販売する際に写真にマウスオーバーすると他の写真も出てくるといった仕掛けもあります。スマホで見るとカートに入っているアイテム数、購入金額がトップで確認できるのでユーザーとしても使いやすいでしょう。ダウンロード / DEMO Fukasawa 白を基調としたデザインでより一層アイテムを引き立てるテンプレートでしょう。商品自体も白をバックに写真を撮っているので、シックな印象を与えますね。ブランディングとしての見せ方としても使えるのでおすすめです！ダウンロード / DEMO コーポレートサイト Zelle PRO WordPressのテンプレートの中でも非常に多機能で、出来ないことは無いんじゃないかというくらい多くのことを実現できるはずです。また、デザイン面でもスクロールすると横からフォームが出てくるパララックス仕様になっており、おしゃれにも見えるでしょう。ダウンロード / DEMO Sydney 画像がディスプレイいっぱいに表示されたインパクトの大きいテンプレートです。トップページに会社情報、事業内容、メンバー、SNSアカウント、ニュースなど多くの情報も載せられるのでスクロールしていて飽きが来ないでしょう。ダウンロード / DEMO 他にも初心者におすすめの無料で使えるWordPressのテーマを紹介しているので、合わせてご覧ください。プラグイン WordPressではプラグインという拡張機能を使うことによってサイトにさまざまなシステムを追加することができます。アクセス解析を行うものや問い合わせフォームを追加するもの、スライドショーを表示させるものなどさまざまなプラグインがあります。プラグインの検索とインストール左メニューの「プラグイン」から「新規追加」を選択します。テーマのときと同様に、新着順や人気順・キーワードでの検索でプラグインを探すことができます。「今すぐインストール」ボタンをクリックするとプラグインがWordPressにインストールされます。インストールされたらすぐに利用できるわけではなく、まず有効化をしなければなりません。プラグインの有効化左メニューの「プラグイン」から「インストール済みプラグイン」を選択します。インストールされているプラグインの一覧が表示されます。使用したいプラグインの「有効化」をクリックします。プラグインの例 SNSボタンのプラグイン「Social Media Feather | social media sharing」プラグインを使用すると、サイトの記事にFacebookやTwitterなどの共有用アイコンを追加することができます。利用するサービスやアイコンの大きさなども自由にカスタマイズが可能です。記事をシェアしてもらうためにもSNSボタンはぜひとも設置しておきましょう。記事編集で役立つプラグイン TinyMCE Advanced 記事作成をする前に必ず入れておきたいプラグインです。ビジュアルエディタに追加できる各機能を手軽に設定できます。 TinyMCE Advancedの使い方 WP Videos YouTubeやVimeoといった外部の動画を記事内に埋め込むことができるプラグインです。URLを入力するだけで追加できるので、簡単に設定できるはずです。 WP Videos SEO対策に役立つプラグイン All in One SEO Pack SEO対策全般の設定をまとめて行えるプラグインです。 FacebookやTwitterといったSNSとの連携、SEOにおいて欠かせないタイトルタグ・ディスクリプションタグの設定も行えるので、まず最初に入れておきましょう。 All in One SEO Packの使い方 Google XML Sitemaps XMLサイトマップを作成してGoogleに更新を通知させることができます。サイトマップがあることでサイトにどんなページが存在するのかGoogleに認識させることができるので、SEOの効果も見込めます。 Google

WordPress

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

【初心者でも分かる！】デザインツールJustinmindの使い方

Justinmindとは

Justinmindの使い方