Webデザイン

フローチャートも作れる！デザインツールgliffyの使い方【初心者向け】

初心者向けにデザインツールgliffyの使い方を解説。オンライン上で作図ができるツールとして使われていますが、フローチャートやインフォグラフィックなども作成することが可能です。実際に作成しながら説明していきます。

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

デザインツールgliffyの使い方に関する解説記事です。

モックアップの作成などに利用されるgliffyについて、登録画面から実際に作成する方法まで紹介しています。初めてツールを使うという人はぜひ参考にしてみてください。

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

gliffyとは

gliffyは、ブラウザ上で無料で利用できるデザイン作成ツールです。あらかじめ用意されている素材や自分で用意した画像を使ってワイヤーフレームなどを簡単に作成することができます。

gliffyの使い方

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

https://www.gliffy.com/

メールアドレスとパスワード、使用するチームの人数を入力し「START FREE TRIAL」をクリックします。
最初の14日間は有料の機能も使用することができます。

gliff_p_1

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

gliffyで何か作ってみる

プロジェクトの作成と基本の操作方法

まず、新規ファイルを作成します。
「Create A New Diagram」から今回は「Wireframe」を選択します。

gliff_p_2

上メニューの図形ツールや直線ツールを使用するとそれぞれの形を描画することができます。

gliff_p_3r

てのひらツールを使用すると画面の好きな所に移動することができます。

gliff_p_4r

矢印ツールを選択した状態で各要素をクリックすると拡大・縮小・移動などの操作ができるほか、右クリックで表示されるメニューからはコピーや削除などを行うことができます。

gliff_p_5r

gliff_p_6

このメニューから画面表示の拡大・縮小ができるようになっています。

gliff_p_7

ここから取り消し・やり直しの操作ができます。
各上メニューの操作は、そのコマンドにカーソルを合わせた時に表示されるショートカットキーでも同様の操作が可能です。

gliff_p_8

Shapesから素材を使用する

左の「Shapes」メニューからドラッグ＆ドロップで各種素材を画面内に追加することができます。

gliff_p_9

各素材はドラッグで拡大・縮小・移動が可能です。

gliff_p_10

文字アイコンを選択すると画面上にテキストを入力することができます。

gliff_p_11

右に表示される青いオプションメニューからはフォントの種類や大きさを変更したり、背景の色を設定したりすることができます。

gliff_p_12

画像を使用する

画面内には自分で用意した画像を挿入することもできます。
デスクトップ等から画像ファイルを直接ドラッグ＆ドロップします。

gliff_p_13

追加した画像も他の素材同様に大きさを調整したり、移動したりすることができます。

gliff_p_14

また、画像のアスペクト比を維持せずにサイズを変更したい場合はオプションメニューから以下のチェックを外します。(逆に維持したい場合はチェックを入れた状態にします)

gliff_p_15

メニューのカスタマイズ方法

Shapesメニューのこの部分をドラッグするとシェイプの種類の順番を並び替えることができます。よく使うものを上に持ってきておくと便利です。

gliff_p_16

右の×をクリックすると、その種類のシェイプをメニューから削除することができます。

gliff_p_17

削除したシェイプを元に戻したり、他の種類を使用したい時はShapesメニュー下の「More Shapes」をクリックし、使いたいジャンルにチェックを入れます。

gliff_p_18

保存とエクスポート

作業中の状態を保存する場合は右上の「Save」ボタンをクリックし、名前を付けて保存します。

gliff_p_19

また、「File」→「Export」からPNG等の形式でファイルの書き出しを行うことができます。(無料版ではGliffyの形式でのみエクスポートが可能です)

gliff_p_20

以上、gliffyの使い方について説明しました。

特に難しいことはありませんが、機能が多いので慣れるまで難しく感じるかもしれません。ぜひ参考にしてみてください。

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

CSSの軽量フレームワーク10選を現役エンジニアが解説【初心者向け】

CSSの軽量フレームワーク10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

流行を知っておきたい！2017年1月のWebデザイントレンド

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ライターのCarrie Cousins氏...

Webデザイン

直接予約を増やす！ホテルのWebサイトを作る上での5つのベストプラクティス

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UXコンサルタントのArmen Ghazarian氏に...

Webデザイン

背景に画像などを入れたい！CSSで背景を指定する方法【初心者向け】

本記事ではHTML要素に対し、CSSで背景を指定する方法を現役エンジニアが解説します。目次 CSSで背景を編集する書き方実際にCSSで背景...

CSS

レンタルサーバー比較・15選【Webサイト制作の初心者におすすめ】

Webサイト制作の初心者の方は、どのレンタルサーバーがいいのかよくわからないということもあると思います。そこで、Webサイト制作の初心者にもおすすめでき...

Webデザイン

Web制作の仕事をするうえでの心構え【初心者必見】

Web制作の仕事をするうえでの心構えについて解説します。最近、在宅でできる副業としてWeb制作の仕事を目指す人が増えています。ここでは一例として...

Webデザイン

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

【ビジネス職・技術職別】面接でよく聞かれる「最近のニュース」の回答例

面接官から出される質問はどれも合否の判断基準となっています。これから採用面接を受ける予定のある人は対策をしっかり立てていきましょう。そんな面接で聞かれる質問の一つ「最近のニュース」に関しても、聞かれる背景を知って的確な回答をすることが大切です。どんな内容を選び、どんな回答をすれば良いのか、事前準備はなにをしておけば良いかを解説していきます。明後日、応募した企業の採用面接にいくことになりました。どんな対策をしていったらいいでしょうか。志望動機や職務要約といった一般的なものの他には「最近のニュース」を聞かれることがよくあります。「最近のニュース」と言われてもどんなニュースを挙げたらいいのか迷ってしまいそうです。新しいニュースであれば何でもよいというわけではありません。面接官の質問の意図にそった記事の選択が求められます。面接官の意図ですか・・・事前に対策できるでしょうか。アドバイスをもらえませんか？お薦めのニュースメディアや解答例を紹介しますので、しっかりした考えをもってニュースを選んだことをアピールしましょう目次この質問で何が判断されるのかチェックしてほしいおすすめのニュースメディア回答例（技術職編）回答例（ビジネス職編）避けた方がいい回答例この質問で何が判断されるのか採用面接の中で「最近のニュース」の質問で一体に何が判断されているのでしょうか。この質問をされる理由は2つあります。詳しく解説していきます。常にアンテナを張っているか面接官はニュースをこまめにチェックして、国内外の様々な情報に常にアンテナを張っているかをチェックしています。ビジネスにおいては、関連業界の情報のみならず、国内外のニュース、経済やテクノロジーに関するニュースなど、多くのことを知っておく必要があります。どんな仕事をするにしても、多くの人や業界と関わって仕事をするのですから、多くの情報を持っていることはビジネスチャンスの広がりに繋がります。常に情報にアンテナを張っている人材というのは、それだけ企業にメリットをもたらす可能性のある人材ということになり、採用されるチャンスが広がるのです。ただし、闇雲にアンテナが高いだけではNG。応募企業の分野や業界を軸に徐々に広げていくイメージでアンテナを貼っていきましょう。意見を持ち、それを伝えられるかもう一つの理由は、対象としてあげたニュースに対してしっかり自分の意見を持ち、それを伝えられるか確認するためです。正解が決まっている仕事もあるでしょうが、多くの仕事に関してはこれで正解という答えはありません。一つひとつの仕事にしっかり向き合い自分で答えを出していくためには、自分で明確な意見を持って理由を語ることのできるスキルが必要なのです。それができるかどうかを「最近のニュース」という形で聞いていることを理解したうえで回答を考えなくてはなりません。このスキルは面接だけでなく、仕事をしていく際にも重要となりますので、考えることを習慣にするのも良いでしょう。面接官の質問の意図に沿ったニュースを取り上げたいのですが、どんな意図があるのでしょうか。まず1つ目は「応募者が様々な情報にアンテナを張っているか」をチェックしています。応募企業の分野や業界に関わるニュースがいいでしょう。なるほど！ニュースの内容から、業界の動向などに常にアンテナを張っているか判断してるのですね。 2つ目は「意見を持ち、伝えられるか」を見ています。1つのテーマにしっかりとした意見をもって取り組んでいるかを求められています。しっかりとした意見を持っている事と、それをきちんと伝えられるかどうか確認しているのですね。その通りです。いずれも応募先の企業で仕事をしていく上で大事なスキルですから、普段から考えることを心がけているといいですね。 [PR] Webデザインで副業する方法とはチェックしてほしいおすすめのニュースメディア面接でニュースに関する意見を求められる可能性はありますが、それの対策として全てのニュースを深く理解する、なんてことはほぼ不可能です。日々のニュースを一通りチェックした後は、最近話題となっているニュースや応募企業と関連のありそうなニュースをピックアップして、ニュースをより詳しく解説しているサイトで理解を深めると良いでしょう。技術や製品に関するニュースをチェックするのにおすすめのサイトを紹介します。 ITmedia http://www.itmedia.co.jp/ ビジネスマン向けの情報を中心に、IT関連ニュースを幅広く提供しているニュースサイトです。ITとテクノロジー関連のニュースが非常に豊富で、提供スピードが速いことも魅力のサイトです。面接用だけでなく、情報のアンテナを常に張っておきたい人におすすめです。 TechCrunch http://jp.techcrunch.com/ インターネットの新たなプロダクトのレビューや新しい企業の紹介などが豊富な、テクノロジー関連の重要なニュースを扱うニュースサイトです。新たな技術に関する第三者の意見を知っておきたい人や、テクノロジー関連の重要ポイントだけを押さえておきたい人におすすめです。 CodeZine https://codezine.jp/ 開発者向けの実装系Webマガジンです。プログラミングに役立つ記事が豊富。プログラマや目指す人におすすめのサイトです。回答例　技術職編（エンジニア・デザイナー）技術職の採用面接で「最近のニュース」に関して回答を求められた場合、応募先に関連のあるジャンルのニュースがあれば、それを挙げるのがベストです。電気機器業界の面接においての回答例を紹介します。私が最近のニュースの中で最も気になったのは、アップルの新スマートフォン「iPhone8」と「X」の発表です。今回、iPhone10周年ということで記念モデルと新バージョンの2つの機種が発表されましたが、それぞれ革新的な機能やUXを追求していると感じました。特に「X」においては画面サイズや操作性/形状が大きく変わり、今後リリースされるアプリケーションの機能やUI/UXに大きな変化をもたらすと考えます。このモデルが普及することでユーザーが新しい体験をし、それが【当たり前】になっていくことはApple社がもたらすイノベーションとして大きな価値があるでしょう。私はユーザー目線に立ち、必要とするものを超えた価値に着目し、それが一体何なのかを常に見極められるような製品開発を行っていきたいと、このニュースから考えました。回答例　ビジネス職編（営業・マーケティング）ビジネス職の採用面接で「最近のニュース」に関して回答を求められた場合、応募先に関連のあるジャンルのニュースがあれば、それを挙げるのがベストです。目立ったニュースがなければ間接的にでも仕事に関わる可能性のある経済ニュースを挙げると良いでしょう。自動車業界の面接においての回答例を紹介します。私が最近のニュースの中で最も気になったのは、ドイツのフォルクスワーゲンの不正環境規制逃れに関するニュースです。フォルクスワーゲンほどの世界的企業がこのような事件を起こすことで、自動車業界だけでなく経済や国際関係に及ぼす影響は計り知れないと感じました。それでもやめられなかったのは、利益とはなんなのかを考えることができず、なし崩しに進んで来た結果ではないでしょうか。私は常に自身の所属する企業、お取引先、お客様に対して、利益とは何かを考え、最良な結果を出せるよう最善の道を選び事業に貢献していきたいと考えております。避けた方がよい回答例面接の場では避けた方が良い回答としては、「政治・国際情勢・宗教・芸能」に関するニュースです。例をあげて解説していきます。まずは政治に関するニュースを取り上げた回答例です。 ○○党の不祥事に関するニュースです。日本のこれからのことや国民のことを真剣に考えているのか疑問に感じます。政治に関するニュースは、特定の政党や法案を支持するかどうか述べることになってしまいがちです。面接官が真逆の意見を持っている場合に心象を悪くする結果となってしまいます。宗教に関する話題も同じ理由で避けたほうが良いでしょう。また、グローバル化が進んでいる昨今、特定の国や外交に関する国際情勢についても同様に避けましょう。応募企業にとってネガティブな情報を進んで取り上げるべきではありません。輸入販売を行う企業の面接での回答例です。円安に関するニュースです。輸入を行う企業では、円安の影響によって仕入れ価格が上がっているにも関わらず、販売価格の値上げはできないため、多くの企業が苦しんでいます。今後の円安の動向が気になります。面接官が返答に困ることは想像できますし、なぜ応募してきたんだと思われかねません。自分の中では大きなニュースであっても、芸能・スポーツのニュースを取り上げるのは避けましょう。スポーツに関する回答例です。読売巨人軍がリーグ優勝したニュースです。情報にアンテナを張っていない、意識の低い人なのかと思われてしまう危険があります。上記の話題は、「最近のニュース」の回答としては避けたほうが無難です。ただし経済ニュースに政治が関わっている場合もありますので、その点は注意して情報を選ぶようにしましょう。まとめ面接でよく聞かれる「最近のニュース」に関しての質問にどのような準備をして、どのような回答をすればよいかを解説してきました。質問する側の意図や背景を知ったうえで、しっかりと事前に準備をしておくことが大切です。採用後も必要なスキルですので面接対策としてだけでなく、日常的に情報にアンテナを張る習慣をつけておくと良いですね。応募先と関連しているニュースを選ぶことが大切なんですね。そうですね。業界を問わず共通しているのは、「何が気になっているか」「それを見てどのような意見をもったか」という事です。政治の内容や、ネガティブな内容を選んだ場合には、心象を悪くする場合があるんですね。はい。面接官は応募者が、どんなニュースを選ぶかで応募者の意識の高さも判断しているんですよ。色々なニュースに普段から触れていることが必要なのだとわかりました。とても大事なポイントです！紹介したニュースサイトなどを日頃からチェックして面接に挑みましょう！また、IT業界は今後も伸び続ける成長産業であり、ビジネス職であってもエンジニアやデザイナーとコミュニケーションが取れる人材が今後求められます。そのためのスキルとしてプログラミングはこれからより求められるでしょう。 TechAcademyでは、IT業界で活躍したい方向けに無料でプログラミングを学び、転職支援も受けられるTechAcademyキャリアというサービスがあります。専門知識を効果的に学び、プロのコンサルタントの支援のもと行う転職活動でより自分にあった企業と出会ってみませんか。 IT業界でキャリアアップを目指したい方はぜひTechAcademyキャリアをご覧ください。

キャリア・転職

JavaScriptでドロップダウンメニューを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでドロップダウンメニューを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次gliffyとはgliffyの使い方gliffyで何か作ってみるそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介ドロップダウンメニューを実装する方法について詳しく説明していくね！大石ゆかりお願いします！ドロップダウンメニューとは通常のメニューをクリックしたり、メニューにマウスをのせた時に再度メニューが下にドロップして、より細かいメニューが出てくるものです。ドロップダウンとは、ドロップ（落とす）してダウン（下げ）させる、つまりメニューが上から落ちてくるイメージで表現されたものです。ドロップダウンを別の言い方で「プルダウン」（プル＝引く）ともいいます。上記の画像にマウスを合わせると「TechAcademyマガジン」サイトの上部にある項目からドロップダウンメニューが表示される様子がわかります。 ※ドロップダウンメニューを、メニュー以外で部品として使えるようにしたものが「ドロップダウンリスト」（またはプルダウンリスト）です。ドロップダウンリストは要素の右端にある「▼」などのボタンから、値を選択するリストを表示させます。また、値を編集できるドロップダウンリストをコンボボックスといいます。 ※HTML標準である部品としてのドロップダウンメニュー（セレクトボックス）については、解説記事「HTMLでドロップダウンメニューを表示する方法【初心者向け】」をご覧ください。 See the Pen js_ddmenu(non_css) by mentor-inoue-y (@mentor-inoue-y) on CodePen. メニューの項目を作る（HTML）メニューを作成するには、まず骨組みとなる項目をHTMLで作ります。 ulタグを使ったリストに各項目をliタグで作成します。 ※ulタグとは、項目を並べたリストを作るためのHTML要素です。CSSによるスタイルを設定していなければ各項目の先頭にリストマーク「・」が付きます。 ※liタグとは、ulタグの中に入れるそれぞれの項目です。 See the Pen js_ddmenu_jQuery by mentor-inoue-y (@mentor-inoue-y) on CodePen. サンプルコード以下のHTMLコードは、「はじめての方へ」からはじまる3つの項目を持つメニューを作る例です。ソースコード <ul class="nav"> <li><a href="#">はじめての方へ</a> <ul> <li><a href="#">おすすめ</a></li> <li><a href="#">料金プラン</a></li>

JavaScript

8つの事例から学ぶ！優れたナビゲーションメニューの作り方

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Jake Rocheleau氏によって投稿されました。モダンなJavaScriptとCSS3の効果によって、ドロップダウンメニューは進歩しています。しかし、すべてのドロップダウンメニューが同じように設計されているとは限りません。この記事では、ユーザーにとって分かりやすいドロップダウンメニューを構築するためのデザインテクニックを紹介します。デザイン例の中には、多階層のドロップダウンメニュー、メガドロップダウンメニューなども含まれていますが、応用しているデザインルールは同じです。サブメニューのための目印サブメニューのあるリンクには、目印となるものを付けましょう。こうした視覚的な小さな目印を配置することで、ユーザーにとってリンクの場所がわかりやすく、アクセスしやすくなります。このルールは設計するリンクが1階層でも4階層でも適用されます。目印には、矢印、ドット、四角形など目立ちやすい記号を使用します。一般的な記号を使用している限り、ユーザーはその記号の意味を理解できるでしょう。例として、上記Threadbirdの優れたナビゲーションメニューを見てみましょう。このメニューのリンクには、サブメニューがあるものとないものがあります。サブメニューのあるリンクにだけ、目印が表示されています。目印には、右向きの二重山括弧引用記号「（»）」が使われています。この記号はシングル矢印よりも目立ちやすいため、Webデザイナーに好まれています。また、小さなサイズにしても、変形する心配もありません。 TutsPlusのナビゲーションメニューも同じような設計です。ドロップダウン形式には下向きの矢印、フライアウト形式には右向きの矢印が使われています。ただし、サブメニューに使われている矢印の記号に、1つ残念な点があります。それは、すべてのリンクにサブメニューがあるにもかかわらず、矢印アイコンは、メニューアイテム上でマウスホバーされた時にしか表示されないことです。この場合、矢印アイコンは常に表示されたままにしておくことが、デザインのベストプラクティスです。しかし、TutsPlusのシンプルなデザインは個人的には好きです。小さな目印がユーザビリティ向上に役立つことを示している、完璧な例といえます。リンクのスペースには、paddingを使用するほとんどのドロップダウンメニューでは、リンク間にスペースが設けられています。しかし、マージン（margin）とパディング（padding）は区別しましょう。 marginを使用した場合、リンクのテキストそのものをクリック/タップすることになります。クリック可能な領域は、テキストとほぼ同じ面積になります。一方、paddingを使用した場合、全体をクリック可能な領域にすることができ、より大きなターゲット要素をユーザーに提供できます。ドロップダウンメニューでは、より大きな領域を確保する方が良いでしょう。 Webdesigner Depotは、昨年のデザイン変更で、クールなアニメーションのドロップダウンメニューを実現しました。blogというリンクをクリックすると、2カラムのドロップダウンメニューが表示されます。これらのリンクをクリックすれば、スペースにpaddingが使用されていることに気づくでしょう。リンクのテキスト周辺の領域もクリック可能になっていることで、サイトのナビゲーションが向上しています。ほとんどのドロップダウンメニューは、「スペースにpaddingを使用するもの」「スペースにmarginを使用するもの」の2つに分類されます。どちらのタイプであるかは、リンク近くのスペースをホバーした時に、マウスのカーソルがクリック可能を示す「手袋アイコン」に変化するかどうかによって確かめることができます。次のWebサイトは、paddingを使用していない例です。 The Philadelphia Orchestraは美しいデザインのWebサイトです。しかし、ドロップダウンメニューのリンクは、テキスト部分しかクリックできません。しかも最悪なことに、ドロップダウンメニューの面積が広いのに、リンクのテキストがとても小さいのです。 marginがpaddingよりも優れた選択になるケースは考えられません。ただし、リンクをブロックレベル要素にした場合、リンクはドロップダウンメニューの100%の領域を占領します。このことは、ユーザーがリンクのボックスの領域内であれば、どこでもクリック可能になることを意味します。どちらを選択するべきかは明らかです。ドロップダウンメニュー内のリンクをクリック/タップ可能な領域を広くすれば、ナビゲーションの使いやすさを大きく向上させることができるでしょう。 [PR] Webデザインで副業する方法とはホバー状態を明確に示すホバーされたメニューの「アクティブな」クラスを設計すれば、所属関係の構造が明らかになります。ほとんどのデザイナーは、ホバーされた時のリンクに、「:hover擬似クラス」を使用しています。しかし、ユーザーがサブメニューのリンクをホバーした時に、メインのリンクを強調して表示したままにするのも効果的な方法です。これにより辿った構造が明らかになり、どのサブメニューのリンクがホバーされているかが一目でわかります。ホバー状態を設計するには、フォントの色の変更、背景色の変更、テキストの下線、ハイライトなど多くのテクニックがあります。目的は、親リンクを、ホバーされていない時にもアクティブな状態に保つことです。例として、上のDePauw UniversityのWebサイトは、白と黒のシンプルなコントラストカラーを使っています。ナビゲーションメニューは、デフォルトでは黒い背景に白いテキストですが、ホバー時にはこれらの色が逆転します。設計ごとにスタイルがあるので、必ずしも白黒のスタイルにする必要はありません。しかし、コントラストをはっきりさせて、アクティブな状態を目立たせることが大切です。 Comedy CentralのWebサイトにも同じ効果が使われています。この場合、白の代わりに、ライムカラーの黄緑色が使われています。もちろん、このアクティブ状態を示すハイライト効果なしのドロップダウンメニューを構築することも可能です。しかし、単に機能するからといって、それが必ずしも最善の選択であるとは限らないことをデザイナーは理解しておくべきです。私は、すべてのドロップダウンメニューはアクティブ状態を示すハイライト効果を、親リンクに使用するべきだと思います。2～3階層のサブ-サブメニューになっているものも含めて。ドロップダウンのアニメーションは迅速にする jQueryとCSS3を組み合わせると、Web上で強力なアニメーションを作成できます。スライド効果であれフェードアウト効果であれ、ドロップダウンメニューは、アニメーションで進化します。しかし、アニメーションは常に目的に合ったものにするべきです。UI/UXデザイナーであれば、実践的にアニメーションを使用できることが望ましいです。ただし、アニメーションは、見た目に活気を与えることができますが、実行を遅くしてユーザー体験を低下させないように注意しましょう。最も優れたドロップダウンアニメーションのための2つの要素は、「速いこと」と「よく目立つこと」に要約できます。例として、上のESPNのナビゲーションを見てみましょう。どのスポーツ部門からでも、チームや関連するリンクのドロップダウンメニューを表示できます。このドロップダウンメニューは、上から下に向かって表示されます。しかし処理は迅速で、リンクをクリックするまでに2〜3秒もかかりません。一般的には、メニューのアニメーションは1.5秒以下に保つことをおすすめします。このルールは、メニューのアニメーションにのみ適用されます。必要があれば、他のページのアニメーションを最大3〜5秒（またはそれ以上）に延長しても構いません。 CSS MenuMakerのWebサイトは、素晴らしいドロップダウンメニューを設計しています。ドロップダウンメニューは、所属している親リンクを示すために、吹き出しのようなデザインをした引用の矢印となっています。また、これらのドロップダウンのアニメーションは迅速です。フェードイン＆アウト効果は高速に処理され、おそらく300ミリ秒くらいしかかかりません。カーソルが他の場所に移動したときにのみアニメーションが生成され、リンクは明確に表示されます。このことは素晴らしいドロップダウンメニューアニメーションの鍵です。アニメーションは誰もが好む魔法のような効果を実現できるものですが、アニメーション要素をページの構成要素の一部として考えることも重要です。結論優れたドロップダウンメニューでは、「機能」と「ビジュアル」の両方が考慮されています。つまり、外観のデザインも大切ですが、ユーザーのために分かりやすく構築することも大切です。どのルールもシンプルで、小さなコードを追加するだけで簡単に実装できるでしょう。また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分でデザインを形にしたい、デザインのスキルを上げたいという方はぜひご覧ください。

Webデザイン

WordPressでカスタムメニューを作成する方法【初心者向け】

WordPressで作成したWebサイトでは、より見やすいサイトナビゲーションである「カスタムメニュー」を活用できます。本記事では、カスタムメニューの設定方法について初心者向けにまとめます。目次gliffyとはgliffyの使い方gliffyで何か作ってみる大石ゆかり田島メンター！！カスタムメニューって何ですか？田島悠介カスタムメニューを活用すれば、自分のオリジナルのメニューをサイドバーに設置できるし、オリジナリティのあるサイトを作れるようになるよ！大石ゆかりそうなんですね！使い方を教えてください！カスタムメニューとは固定ページやカテゴリー一覧、好きなページなどオリジナルのメニューを編集・表示できる仕組みです。メニューの順序や階層も自由にカスタマイズできるので、しっかり作成することでサイトのナビゲーションを格段に向上できます。カスタムメニューを作成するここからは、実際にカスタムメニューを作成してみましょう。ダッシュボード>外観>メニューを開きます。「新規作成」をクリックすると、新しいメニューを作成することが可能です。固定ページを追加したいときは、追加したいものをチェックし「メニューに追加」ボタンを押しましょう。カスタムリンクを選んだ場合、好きなサイトのリンクを載せることも可能です。「カテゴリー」をクリックし、作成したカテゴリーをメニュー表示できます。（カテゴリーの一覧ページにリンクします）「固定ページ」「カスタムメニュー」「カテゴリー」を追加できるため、サイト内外のあらゆるページをメニューに挿入可能です。また、カスタムメニューはドラッグ&ドロップで簡単に表示順を変更できます。階層化・親子関係もすぐに作れます。以上でカスタムメニューの作成が完了しました。 [PR] Webデザインで副業する方法とは作成したカスタムメニューを表示させるここからは、作成したカスタムメニューをサイト上に表示させます。表示は「ウィジェット」の設定で行います。ダッシュボード>外観>ウィジェットを開きましょう。ブロックベースのウィジェットの場合 WordPress 5.8からはウィジェットがブロックベースとなりました。（旧ウィジェットのClassic Widgetsを使う方法は後述します。）「カスタムメニュー」の名前も「ナビゲーションメニュー」に変更されました。ウィジェットの右側の＋をクリックすると、下記のように左側にブロック一覧が表示されます。ナビゲーションメニューを表示したい場所（今回はサイドバーに表示）に、左のブロック一覧から「ナビゲーションメニュー」をドラッグしましょう。ナビゲーションメニューに表示したいメニュー名を入力しましょう。プルダウンから表示するメニューを選択します。入力できたら右上の「更新」ボタンをクリックしましょう。サイト上で確認すると、サイドバーに表示されています。左サイドバー、右サイドバーなど、指定できる場所は選んだテーマごとに変化する点を把握しておきましょう。フッターのみしか表示されないテーマもあるため注意が必要です。 Classic Widgetsの場合 WordPress 5.7まではClassic Widgetsが使用されていました。ここではClassic Widgetsを使った例をみていきましょう。 WordPress 5.8以降でClassic Widgetsを利用したい場合は、Classic Widgetsの名前のプラグインをインストールすることで旧ウィジェットに戻すことが可能です。カスタムメニューを表示したい場所（今回はサイドバーに表示）に、左のウィジェットエリアから「カスタムメニュー」をドラッグできます。追加できたらタイトル欄に「サイト上で表示したいメニュー名」を入力し、「メニューを選択」プルダウンから先ほど作成したカスタムメニューを選びます。保存ボタンを押すと反映され、サイト上で確認してみるとサイドバーに表示されていました。通常のWebサイトでは、リンク先ページのURLを変更するとすべてソースの変更が必要でした。しかし、カスタムメニューに変化すると（固定ページやカテゴリーなどで追加したメニューに関しては）自動的にURL変更に対応してくれるため、リンク切れになるリスクも少なくなります。自分好みに変え、より使いやすい・オリジナルのサイトを作成してみてください。 WordPressを使いこなしたい場合は、WordPressでカスタム投稿タイプを作成する方法もあわせてみていきましょう。大石ゆかり独自のおすすめページとかを手軽に貼れるようになりましたね♪ 田島悠介そうだね。親子関係のあるサイトなんかもわかりやすく紹介できるから、活用するといいね♪ 大石ゆかりはい♪ WordPressを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。

WordPress

【誰でも簡単に！】モックアップを作成できるおすすめツール5選

モックアップとは、Webデザインの作成時に外観・レイアウト等を確認するためのものです。ここではモックアップの作成を簡単な操作で行うことができる便利なツールを紹介していきます。 draw.io web上で操作するモックアップ作成ツールで、無料で使用可能です。左のメニューからパーツを選び画面上へ配置し、右のメニューで色やテキストなどを編集します。ローカルから画像ファイルをドラッグ＆ドロップしてアップロードすることも可能です。チュートリアル動画もあるためいつでも使い方を確認することができます。作成したxmlファイルはその場でダウンロードできる他、GoogleDrive・OneDrive・Dropboxなどのクラウドストレージに保存可能です。 draw.io Mockingbird draw.ioと同じくweb上で操作が可能なツールです。「Add element」メニューから素材を配置し、大きさやテキストを編集することでモックアップを作成します。ステンシルにGoogleマップやSNSアイコンなど実用的なものが多く、イメージしやすい仕様になっています。無料会員でも画面内への画像ファイルのインポートや、作成したモックアップのpdf・png形式でのエクスポートが可能です。 Mockingbirdの使い方 [PR] Webデザインで副業する方法とはgliffy こちらもweb上で作成可能なモックアップ作成ツールです。メニューバーのカスタマイズがある程度可能になっており、自分の作業しやすい環境にできるのが特徴です。ユーザー登録をしている場合は画像のアップロードも可能になっています。無料版ではgliffy専用のファイル形式でのみファイルのエクスポートができる仕様です。 gliffyの使い方 moqups web上でモックアップの作成が可能なツールで、ステンシルやアイコンが豊富に用意されています。ユーザー登録をしている場合は画像ファイルのアップロードも可能です。(無料会員でも可) 作成したファイルをpdf・pngでエクスポートする場合は有料会員登録が必要になっています。 moqups Flinto スマートフォン向けのモックアップ作成ツールで、ダウンロードして使用します。 macとiOSでの作業が可能で、どちらも有料ですが無料の試用期間があります。画像をアップロードし、それらを繋げて画面遷移の設定を行うことができます。また、この時ページ遷移時のエフェクトも複数から選べるようになっています。 Dropboxとの連携やシェア機能も充実しているのが特徴です。 Flinto 以上、モックアップを作成するツールを紹介しました。会議やプレゼンでも利用できますし、個人でWebサービスを作る上でも役立つツールなのでぜひ利用してみてください。 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

ディープラーニングで欠かせない！ニューラルネットワークとは

今回は、ニューラルネットワークについて解説します。ニューラルネットワークの仕組みについて説明し、種類も紹介しているので、ぜひ理解しておきましょう。なお本記事は、TechAcademyのオンラインブートキャンプ、AI講座とデータサイエンス講座の内容をもとに作成しています。田島悠介今回は、機械学習に関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介ニューラルネットワークについて詳しく説明していくね！大石ゆかりお願いします！ニューラルネットワークとはニュートラルネットワークとは、人間の脳内で処理される構造を数式モデルで表現したものです。コンピューターシステムにおいてのニュートラルネットワークは、脳内でニューロンがシナプスで結合することで、ネットワークを形成している状態の問題解決のモデルのことです。コンピューターシステムとは、何かの入力によってなにかの処理を行い、最終的に結果を自動的に導き出す、コンピューターを使用したシステムを意味します。シナプスとは、脳内の情報をやりとりする為にニューロン（神経細胞）同士をつなぐ接合部分のことです。ニューロンとは、脳内で考える場合の神経細胞のことです。ニューロン同士をシナプスで結合させています。シナプス同士の結合する強度を変化させることで、様々なニュートラルネットワークを選択することができます。これにより、様々な方法で問題解決を行うことが可能になります。ニューラルネットワークの仕組みニュートラルネットワークの基本ニュートラルネットワークの仕組み自体は非常にシンプルです。例えば1と2と3という数字をニュートラルネットワークに入力すると、4と5という数字が出力されるとします。つまり、処理される内容は明示されていないが、複数の数値を入力すると複数の数値が出力されるというのが最も基本的んニュートラルネットワークです。ここまでは非常にシンプルなのですが、この構造が多層化し、入力と出力以外の処理が存在するようになると、処理が一気に複雑化します。ニュートラルネットワークの応用ニュートラルネットワークでよく使われる画像認識について、数字を利用して簡単に説明します。例えば、多くの写真データから、人間と人間以外を分けるニュートラルネットワークがあると仮定します。写真データを入れた際の処理は次のようになります。人間だと判断する場合入力：写真データ ↓ ニュートラルネットワーク ↓ 出力：(1,0) 人間以外と判断する場合入力：社員データ ↓ ニュートラルネットワーク ↓ 出力：(0,1) この様に、ニュートラルネットワークを通すと、数値が返ってきます。つまり、ニュートラルネットワークはプログラミングで考えると、数値を返す関数のようなイメージで捉えることもできます。ニュートラルネットワークの部品ニュートラルネットワークは、入力層(input cell)、出力層(output cell)、隠れ層(hidden cell)、記憶層(memory cell)、中核(kernel)等で構成されます。ニュートラルネットワークでは、シナプス同士の結合の強さを変化させることで、情報の伝わりやすさが変化します。このシナプス同士の結合の強さを、人工ニューロンでは重みを意味するWeightの頭文字を意味するWを使用して表します。ニュートラルネットワークには、教師あり学習と、教師なし学習という考え方があります。教師あり学習とは教師あり学習とは、正解やより良い方法を膨大なデータとして用意しておき、その正解を元にコンピューターが学習することで、コンピューター自身を成長させる学習方法です。 Googleで開発されたAlphaGoという深層学習（ディープラーニング）により、世界最高峰のプロ囲碁棋士に勝利したプログラムがあります。このAlphaGoのうち、第3世代までの、AlphaGo Masterは教師あり学習を元に、自己学習を繰り返した結果、プロ棋士に勝てるようになりました。教師なし学習教師なし学習といっても、最初の段階で教師あり学習のように、正解の大量のデータを教師として学習する部分が無いだけであり、基本的なルールは学習する必要があります。基本ルール部分を学びますが、その部分は教師として考えないという理論です。教師なし学習では、基本ルール内で勝つために、自分自身と戦い続けることで、性能を上げていきます。 AlphaGo Masterの次に開発されたAlphaGo Zeroは、教師なし学習を元に発展しました。 AlphaGo Zero では、ルール以外の知識は全く与えずに強化学習を行うことで、40日後に、AlphaGo Masterに89勝11敗しました。つまり、AlphaGo Zeroは世界最強の囲碁棋士に40日間で成長することができたということです。 [PR] Webデザインで副業する方法とはニューラルネットワークの種類単純パーセプトロン単純パーセプトロンとは、複数の入力層から与えられた値を処理し、出力するというものです。図解解説入力値は複数存在します。入力nのnは、何番目の入力値かは不明ですが、処理する部分は重み（w)です。重みで処理する内容としては、入力層から与えられた内容を足したり、掛けたりします。処理後の結果に対して、活性化関数の操作により出力されるかどうかが決定されます。活性化関数で行われる処理としては、いくつかありますが代表的なものにステップ関数があります。ステップ関数とは、ある閾値より大きかったら1を出力します。そして、ある閾値以下だったら0を出力します。ステップ関数をPythonで実装した場合のコード def step_function(x): if x < 10: return 1 else: return 0 ステップ関数をPythonで実装した場合の解説 1行目のdef step_function(x): では、step_functionという名称の関数を宣言しています。 (x)の部分は引数と言います。引数は関数を利用する際に、ある値を渡すことができます。ここで言う引数は、ニュートラルネットワークの入力層から渡された入力値に重みの処理をしたあとの値になります。 2行目のif x < 10:では、渡された引数が10より小さいかどうかを判断しています。今回の閾値は10です。 3行目のreturn 1は、引数xが閾値の10より大きかった場合に1が出力されるという意味です。0が出力値です。 4行目は、引数xが閾値の10以下だった場合に処理するという意味です。 5行目のreturn 0は、4行目の条件である、引数xが閾値10以下だった場合、0が出力されるという意味です。向いていること基本的には足し算や掛け算しかできない単純パーセプトロンですが、このパーセプトロンを並列に組み合わせることで、2層構造にすることができます。 2層構造になったパーセプトロンは、足し算や掛け算や平方根などの計算を学習することができます。つまり、教師あり学習が可能になるということです。向いていないこと単純パーセプトロンは線形分離不可能問題を解くことができません。線形分離とはoとxで構成された情報を線で区切ることです。多層パーセプトロン多層パーセプトロンとは、複数の入力層から与えられた値を処理し、出力するというものです。図解解説多層パーセプトロンは、単純パーセプトロンが複数組み合わさり、複数の重みの先に、隠れ層が存在し、そして更にその先に出力層が複数存在します。つまり、単純パーセプトロンが相互作用する形になっています。向いていること多層パーセプトロンは線形分離不可能問題を解決することが出来ます。向いていないことパラメーターを増やせば増やすほど、各パラメーターの学習を適切にすることが難しくなります。今回は、ニューラルネットワークについて解説しました。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも、AI（人工知能）の構築に必要な機械学習・ディープラーニングについて実践的に学習することができる、オンラインブートキャンプAI講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる

機械学習

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

フローチャートも作れる！デザインツールgliffyの使い方【初心者向け】

gliffyとは

gliffyの使い方