TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSのコンフリクトを解消する方法を現役デザイナーが解説【初心者向け】
icon
icon
CSS

CSSのコンフリクトを解消する方法を現役デザイナーが解説【初心者向け】

初心者向けにCSSのコンフリクトを解消する方法について解説しています。プログラムの間で競合が発生することをコンフリクトといいます。コンフリクトが起こる原因と解消の手順、またコンフリクトを予防する方法について学びましょう。

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

CSSのコンフリクトを解消する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

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

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

コンフリクトを解消する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

コンフリクトとは

プログラム言語のソースコードにて、「コンフリクト」は、コードの重複による資源の無駄使いや二重処理を表しています。CSSの「コンフリクト」も同様に、意図しない装飾が重なった場合やスタイルの適応の優先順位が意図した結果にならず、作業が差し支えている状態です。

 

なぜコンフリクトが起こるのか、起こりやすい場面

途中からソースコードの一部分を変更（修正）したことによって、処理の順序が変わってしまってしまう可能性があります。また、コードの追加や削除が行われた場合に、「コンフリクト」は、起こりやすいです。また、いろいろ試してみたり、いろいろ試された結果、意図しない処理になって「コンフリクト」にもなっていることが考えられます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

コンフリクトを解消する方法

確実に「コンフリクト」を解消するための黄金則はありませんが、「コンフリクト」していなかった状態に戻せることが重要な方法です。その実現方法として、まずは、ファイル管理システムとして「SVN」や「Git」にてファイルを管理します。そして、「コンフリクト」が生じた時には、「SVN」や「Git」などのファイル管理システムのファイルのリビジョン（修正履歴）から以前の保存内容の状態に戻す（復元する）ことが容易になっています。

AWS Cloud9では、メニューの「File」から「Show File Revision History」を選択することにて、過去のファイルの修正履歴を確認してから、「Revert」にて戻すことが可能です。

「Revert」を押した時点にファイルの内容を戻してからは、その時点以降の修正履歴が失われることになりますので、「Revert」による内容の巻き戻しはせずに、戻したい時点のソースコードの内容による最新のファイルへの上書き（コピーアンドペースト）をお勧めしておきます。

 

コンフリクトを起こさないための方法を知ろう

「コンフリクト」を起こさないためには、順序よく規則正しくて、法則性のあるソースコードの記述にて進めることです。また、一時的に作業を中断する時でも、何をしている途中だったのかを忘れずにメモに残しておくことにて、途中に必要なプロセスや手続きが欠落することを防止できます。

なお、複雑かつ複数のファイル関係は、全体像の把握や細部への気配りを困難にしますので、 簡素なソースコードや数量を意識して、取り組んでみてください。複数人にて作業するときは、これらをコーディング規約にしてから、厳守することもあります。

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

CSSのhoverを使ってアニメーションを設定する方法【初心者向け】

今回はCSSのhoverを使ったマウスオーバー時にアニメーションを設定する方法を説明します。 アニメーションを使えばWebサイトの表現に幅が出るので、書き...
CSS

CSSでサイズ可変の正方形の描き方を現役エンジニアが解説【初心者向け】

CSSでサイズ可変の正方形の描き方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSにつ...
CSS

CSSでposition: fixedを使うと文字が重なる原因と対処法を現役エンジニアが解説【初心者向け】

CSSでposition: fixedを使うと文字が重なる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...
CSS

CSSのoverflowを使ってはみ出た表示の指定をする方法【初心者向け】現役Webデザイナーが解説

今回は、CSSのoverflowではみ出た表示の指定をする方法を説明します。 文章が長くなり、外枠からはみ出てしまう時、手動で改行などしなくてもCSSで調...
CSS

CSSのリンクの色を変えない方法を現役エンジニアが解説【初心者向け】

CSSのリンクの色を変えない方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
CSS

CSSの疑似要素first-lineで要素をデザインする方法を現役エンジニアが解説【初心者向け】

CSSの疑似要素first-lineで要素の最初の行をデザインする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...
CSS

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

PHPでフォームからデータを受け取る方法（GETとPOST）

プログラミング初心者向けに、PHPの基礎を紹介する記事です。 今回は、フォームからデータを受け取る方法について解説します。 最初にフォームの送信方法とPHPでの受け取り方に関しての説明をします。 その後、実際に動くコードを作成してデータの送受信を試していきます。 フォームでのデータのやりとりはWebサイトなどでは基本なので、ぜひ覚えておきましょう。   目次 GETとPOSTとは HTMLのフォーム 送信されるデータ フォームデータの受け取り方 受信データのバリデーション 実際にコードを書いてみよう 開発環境はXAMPPを使っています。   GETとPOSTとは PHPにおけるデータの受け取り方には、GETリクエスト と POSTリクエスト を使う2通りの方法があります。 POSTリクエストはフォームからHTTP通信により送信され、送信データはリクエストの本体に含まれます。 GETリクエストはフォームやリンクからHTTP通信により同じように送信されますが、送信データはURLの最後に？に続いて　パラメータ名=値という形式で付加されます。     大石ゆかり フォームを使ってデータを送信できるんですね。 田島悠介 そうなんだ。フォームから送ったデータを、PHPで取得できるんだよ。 大石ゆかり いろいろなところで使われてそうですね。 田島悠介 そうだね。後、フォームじゃないんだけどURLの最後に?p=2とか/p2/もGETでデータを送ってることになるんだ。 多くは何ページ目とかに使われるね。HTMLでフォームを作って送信してみよう！ [PR] Webデザインで副業する学習方法を動画で公開中HTMLのフォーム サーバにデータを送信するためには、HTMLのフォームを使います。 GETリクエストのフォーム フォームの構造は次のようなコードです。 <form action = “index.php” method = “GET”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> formタグのaction属性に送信先のURLを指定します。 送信方法はデフォルトでGETリクエストですが、method属性で POSTかGETに指定できます。 formタグ内の inputタグの値が送信するデータです。 この時、name属性がリクエストパラメータ名になり、value属性の値やテキストボックスに入力された値がそのパラメータの値です。 上のコードでは、フォームのデータは、commentというパラメータ名で入力値とのペアで送られ、送信方法はGETリクエストになり、送り先は index.php です。 POSTリクエストのフォーム POSTリクエストにしたい場合は、次のようにform要素のmethod属性をPOSTに変更するだけです。 <form action = “index.php” method = “POST”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> 送信されるデータ ここでは、例としてcommentという名前属性のinput要素に hogehogeという文字を入力して送信するとしましょう。 GETリクエストのデータ データがURLの一部として含まれてサーバに送られます。 送信先は index.phpとすると、URL全体は次のようになります。 http://index.php?comment=hogehoge ここで注目していただきたいのは、後に付けた?comment=hogehogeの部分です。 GETリクエストのデータは基本的には、 ? の後に パラメータ名=値のペアの形式で送られます。 複数のデータの場合は、間を & でつなげます。 http://index.php?comment=hogehoge&title=hello このURLで送られるのは、 comment=hogehogeとtitle=helloという２つのデータ（パラメータ名=値のペア）です。     フォームデータの受け取り方 GETリクエストで送信したデータを受け取る GETリクエストで送信したデータは、グローバル変数である $_GET に連想配列という形で入っています。 そこで、PHPでデータを受け取るときは、この　$_GET を使います。 先ほどの例では、comment=hogehogeというデータが送られましたが、$_GETには、[‘comment’ => ‘hogehoge’] という連想配列で保存されます。 $_GETからデータを受け取るには、受け取りたいinput要素の name属性
PHP

【解説】インフラエンジニアの仕事と取得しておきたい資格

IT業界で日々生み出される新しいサービスやシステムには、必ずネットワークやサーバーという存在があります。それらは、サービスやシステムを正常に稼働させるために必要不可欠。 その必要不可欠なネットワークやサーバーを設計・構築・運用をするインフラエンジニアは縁の下の力持ちのような存在です。 日々サービスやシステムに触れる時にネットワークやサーバーのことはあまり考えることが少ないかもしれませんが、正常に稼働させるよう監視し運用しているインフラエンジニアの努力がないと、ユーザーは快適にサービスを使うことができません。   では、そんなインフラエンジニアは具体的にどんなお仕事をしてるか、インフラエンジニアになるためにはどうしたら良いかを解説します。   インフラとは そもそもインフラという言葉は聞き覚えがあるかもしれませんが、それが何を指すのか具体的に答えられる人は少ないでしょう。インフラとは、インフラストラクチャーの略で、本来は「下支えするもの」「下部構造」という意味を持つ言葉です。広く捉えると、生活や産業を成り立たせるための必要な施設やサービスとなります。 私たちの生活におけるインフラは、上下水道や電気設備、ガスなどの生活必需基盤だけではなく、道路舗装や橋梁なども含まれます。 どれだけサーキットで早く走れる車を開発しても、道路舗装がなければ最大限の力を発揮出来ません。 素晴らしい家電製品を買ったとしても、電気が通っていなければ使うことができません。   このように、下部構造がなければ私たちが生活を営む事が出来ないように、ITインフラが構築されていなければ、私たちがPCやスマートフォンでインターネットを使ったサービスや恩恵を受けることが出来ないと言えるのです。 つまりITインフラとは、サーバー構築やネットワーク管理、PCの設定やソフトの設定など、これら全てを指す物と言えます。そして、ITインフラを専業とする技術者の事をインフラエンジニアと呼びます。   インフラエンジニアの仕事 インフラエンジニアはITインフラの業務に携わるエンジニアの総称です。インフラエンジニアは2つに分類することができ、1. ネットワークエンジニア  2. サーバーエンジニアと呼ばれる事もあります。 基本的には、どちらかから始まって最終的に1と2どちらの領域も携わることが多いため、インフラエンジニアと呼ばれています。   では、インフラエンジニアとはどのような業務をしているのでしょうか。業務の内訳としては、設計、構築、運用の3つに分ける事が出来ます。   1 設計 ある特定のシステムやサービスが正常に作動するために必要となるネットワークやコンピュータの導入など、クライアントが求める質・ボリューム・速さなどを実現するための最適なプランを企画書に落とし込み、提案する業務です。 様々なネットワーク周辺機器を知り、それらの性能・特質を熟知していなくてはなりません。費用対効果をしっかり把握し、最適な機器の選定をする事も重要です。   2 構築 設計されたプランを元に、実際にインフラを構築していく作業もインフラエンジニアが担います。現場での機器設置・ネットワーク設定を行い、要件を満たす動作・機能を構築します。構築したらしっかりと負荷テストを行い、構築したものが正常に稼働するかを確認するのも大切な役割です。 インフラ、特にサーバーの構築において使用されるOSはLinux（※）が大半を占めますが、LinuxとWindowsの混在環境での構築が求められることもあるので、当然Windowsに対しても幅広い知識が必要となります。   3 運用 設計・構築をしたインフラが、その後も継続的に正常な動作をしているかどうか、保守や監視をするのも仕事です。もし、障害が発生した場合は、何が原因で障害が起きているのかを特定し、復旧作業を行います。 企業からインフラの保守・運用を一任されているインフラエンジニアは、何かトラブルがあった際にも迅速に問題解決ができるよう、トラブル対処に関する知識やスキルも必要になります。 企業にとっては、サービスやシステムが止まることが莫大な損失を発生させてしまう一大事です。そういった場合に、しっかりと対応ができることが求められます。   ※Linuxとは、OSの一種です。OS=Operating System（オペレーティングシステム）でコンピュータを使う時の基盤となるものです。有名なOSとしてはWindows、Macがありますが、Linuxはオープンソースのソフトウェアです。世界中の無数のエンジニアによるボランティア活動によって改良を重ね作られました。 完全に無料で使うことができ、中身もすべて公開されている状態です。そのため、カスタマイズ性に優れ、機能強化もスピーディーに行われ、開発した内容の全てを理解した上で使えることから、インターネットサービスのインフラの大半にはLinuxが使われているということができます。 Linuxはインフラだけでなく、スマートフォンから家電機器、テレビやロボット、スーパーコンピューターにまで幅広い分野で使われています。 [PR] Webデザインで副業する学習方法を動画で公開中インフラエンジニアの仕事に活かせるIT資格 インフラエンジニアの仕事を紹介してきましたが、未経験でインフラエンジニアを目指す場合、どのようなことを学習すると現場で活かせるのでしょうか。そこで、IT関連の資格をいくつか紹介します。 CCIE（シーシーアイイー） アメリカに本社がある世界最大のコンピューターネットワーク機器開発会社であるCisco Systems社が認定するベンダー資格です。 この資格には種類があり、難易度が高い順に以下の通りです。 CCIE > CCNP > CCNA > CCENT この中でもCCIEはネットワーク資格の最高位と言われ、すべてのシスコ認定プロフェッショナルのうち、CCIE取得者は3%未満と言われているほど難易度としては難しいものです。 CCIE取得に到達するためには、実務経験を数年積むことが推奨されており、筆記試験及びラボでの実技試験に合格する必要があります。 CCNA / CCNPはネットワーク関連の資格の中でも有名で、2つとも合格ができればプロフェッショナルな知識を保有していることを証明できるでしょう。   LinuC（リナック） LinuCは、NPO法人LPI-Japanが運営するLinux技術者認定です。ITインフラ構築において圧倒的なシェアを誇るLinuxの技術力を測る認定ですが、Linuxだけではなく仮想化技術やクラウドセキュリティなど今のインフラエンジニアが現場で求められるスキルを問う内容となっています。 現在ITインフラに携わる職種であったり、またはその職種への転職を検討している方は、取得しておきたい必携の認定です。 企業によっては、LinuCを新入社員教育に使っていたり、取得した社員に一時報奨金や昇給などを実施するほど、社内での評価やキャリアアップにもつながる資格です。 LinuCには3つのレベルがあり、初級のレベル１からレベル３へとステップアップしていく構成になっています。未経験の方はまずレベル1でLinuxの基本操作とシステム管理の知識・スキルを習得しましょう。 Oracle Master（オラクルマスター） アメリカにあるソフトウェア会社Oracle Corporationが認定するオラクル社製品の知識を証明する資格です。Oracle Masterは認知度が高く、世界共通で評価される人気のある資格です。未経験からエンジニアを目指す人や、エンジニアになりたての人が取得すると一定の知識があることを証明できるでしょう。 Oracle Masterには4つのレベルがあり、難易度は以下の通りとなっています。 Platinum > Gold > Silver > Bronze 未経験の人はBronze（ブロンズ）から取得をしましょう。 4つの中では難易度が一番低く、データベースの管理者として必要となる基礎知識を問われます。Silverを取得するには、Bronzeの試験に合格している必要があり、Bronzeと比較して難易度は一気に高くなるので、自分のキャリアに必要かどうかもあわせて取得を検討した方が良さそうです。   このように、IT関連の有名な資格はいくつかありますが、IT企業への就職・転職のきっかけや自信を持てる要素の1つとして、取得しておくと良いでしょう。   どうすればインフラエンジニアになれるのか 未経験からインフラエンジニアになることは十分に可能です。インフラエンジニアは非常に専門性の高い職業ですが、それだけに興味を持つ人も多いと思います。 特に、「専門的なスキルを身につけ長期的に安定感あるキャリアを築きたい」と思っている方には良い選択肢と言えるでしょう。 慢性的な人手不足となっているインフラエンジニアは、常時採用ニーズがあるポジションでもあります。多くの仕事が今後さらに機械化されていく中で、それらを支えるインフラエンジニアは必要不可欠な存在となります。   では、そのインフラエンジニアになるためにはどうしたら良いのでしょうか。 未経験から目指す場合は、前述した資格取得を目指すのも1つの手です。全く何の知識もないままでは、さすがに企業側も受け入れられるところは少ないので、一定の知識がある証明として資格の取得はおすすめです。 また、実際に現場で業務をする際に、サーバーやネットワークを扱ったことがないと同時期に入社した人に遅れをとってしまったり、昇給なども遠のいてしまいます。そのため、事前にある程度の知識とスキルを習得した上でインフラエンジニアになるのが望ましいと言えます。   未経験からインフラエンジニアを目指せる就職直結型スクール 就職・転職活動の前に、基礎知識とスキルの習得をするのであれば、短期集中でスクールを活用するのが近道と言えそうです。 職業訓練やプログラミングスクールがありますが、エンジニアへの転職を考えている場合は、プログラミングスキルの習得と就職・転職まで実現ができるTechAcademy Proがおすすめです。 TechAcademy Proの特徴は、オンライン完結の学習システムで空いた時間を有効活用できる事が挙げられます。PCとネット環境があれば、教室に出向く必要が無いという大きなメリットが得られます。 未経験者であっても習得が出来るよう現役エンジニアの手厚いサポートによってプログラミングやデータベースの基礎を学ぶことが出来ます。学習と並行して、IT業界への就職・転職サポートも行っており、すでにこのスクールからはインフラエンジニアへの転職を実現した卒業生がたくさんいます。   就職・転職サポートでは、キャリアカウンセリングを実施し、本人のバックグラウンドや今後の意向を確認した上で、適正・希望にあった求人の紹介、書類選考、企業面接の日程調整までフォローします。現業が忙しい人も、代理で転職活動を進めてくれるので最小限のエネルギーで転職活動をすることができます。 また、このスクールには受講料キャッシュバック制度というものがあり、学習をしっかりと完了して就職に至った方には受講料を全額キャッシュバックしています。実質無料でエンジニアの基礎知識の習得と就職・転職の実現まで可能なので、あまり自信がない未経験の方にとってはエンジニアへの第一歩として挑戦しやすいサービスではないでしょうか。 詳しいスクールの内容はTechAcademy Proのページでご覧ください。 無料カウンセリングはこちら
キャリア・転職

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

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、HooktoWin.comの共同設立者であるAndrew McDermott氏によって投稿されました。   デザイナーは不可能を可能にすることを期待されます。 信じられないほど複雑なプロセスを、シンプルで美しいものに作り変えるよう求められることも、何度もあるかもしれません。そして成功したときには、ロックスターになったような気分を味わえるでしょう。 しかし、こうした大きな期待に応えられなかったときには、ひどく落ち込むかもしれません。デザイナーには完璧主義者の人が多く、自分自身が自分に対する最悪の批評家であることもよくあります。間違いを自分の責任と見なして、全てを台無しにしてしまったかのように思うこともあります。   それでも、落胆するような状況において間違いを受け入れることで、これを成長と学びの機会とすることができるはずです。 もし本当のことをお伝えするとしたら…… デザイナーが気づいていない真実：間違いのほとんどは、デザイナーの責任ではありません。辛い現実：いずれにしても、デザイナーは責任を負うことになります。 デザイナーに不足しているのは、人についての知識 新規の仕事やプロジェクトにおける、デザイナーの目標設定の仕方が、間違いの原因というわけではありません。ほとんどの場合、実際はその逆です。デザイナーは、多くの人が気にしないような細部のデザインまで、こだわりを持って熱心に取り組みます。神は細部に宿ることを知っているからです。 問題となるのは、人についての知識が不足しがちなことです。これは、デザイナーが学校で教えられないことですが、仕事に大きな影響を与えます。 もしデザイナーが正規の（または非正規の）教育を受けていれば、その過程で自分独自のデザインを究めることを求められます。また、デザインの原則、デザインと配色の関係、色彩なども学びます。しかし、これだけでは十分ではありません。 デザインや美術について教育を受けることはあっても、人について深く学ぶ機会はありません。こうした理解不足は、デザインに影響し、ひいては予期しないUXの間違いの原因となります。デザイナーに不足しているのは、人についての知識なのです。   UXの間違い1：ユーザーが実際以上に多くを知っていると思い込むこと デザイナーは合理的な人々です。インターフェースの設計に多くの時間を費やすため、デザインがWeb上でどのように機能するかを直感的に理解しています。 「これは常識だ！」とデザイナー自身が思っていても、実際はそうではないこともあります。デザイナーにとっての常識が、ユーザーにも通用するとは限りません。デザイナーは設計に多くの時間を費やしているために、よく知っているだけなのです。 また、デザイナーがプロフェッショナルであるのに対して、ユーザーが同等の専門性を備えていないこともあります。こうした理由から、ユーザーに対して次のように仮定するのは、間違いです。 適切な質問を選ぶことができる 設定の操作について理解している アイコン、マーク、ロゴの意味を知っている コンテンツに意識を集中し続けることができる Webサイトで提供している指示をよく読んでそれに従う 必要とするコンテンツの見つけ方を知っている   問題の核心が見えてきたでしょうか？デザイナーがこのように仮定すること自体は合理的ですが、問題を引き起こすおそれがあります。なぜなら、こうした仮定は現実に基づいたものではないからです。 利用方法が全く分からないユーザーもいます ユーザーの中には設定の操作が初めてという人もいます あなたの設計したサイトを、乱雑で混乱するようなデザインだと思うユーザーもいます 関心が他に向いているマルチタスク型のユーザーは、コンテンツに集中するほど時間がありません 指示に従うのを拒むユーザーもいます ほとんどのユーザーは、見ているコンテンツについて詳しく知っていません こうした場面でデザイナーに求められる仕事は、「迷える羊の群れを、頭数を減らして束ねる」ことです。 条件に合うユーザーだけを選び抜き、意図したプロセス通りに彼らがサイトを利用できるような設計にします。その他の条件に合わないユーザーは、除外します。   UXの間違い2：ユーザーのためのデザイン 「ユーザーのためのデザイン」は、ここ数年で繰り返し提言されているアドバイスで、頭にたたき込まれているデザイナーも多いかもしれません。デザイナーは、ユーザーのニーズをよく理解して、ユーザーを中心にデザインするよう教えられています。 しかし、このアドバイスには見落としている点があります。「なぜ？」と不思議に思うかもしれません。見境なく教え込まれているアドバイスですから。 その見落としている点とは、必ずしも全てのユーザーがターゲット・オーディエンス（Target audience：広告やマーケティングにおいて、目標とする顧客）と一致するとは限らないことです。サイトを利用しているユーザーが、「求めているユーザー」像と一致しないことがあるのです。   例として、Googleを考えてみましょう。 Googleは、そのエネルギーや注意の大半をユーザーに向けています。Googleにとってのユーザーとは、検索者です。検索者により良いユーザー体験を提供するために、多くの時間と巨額の資金を投資しているのです。   しかし、検索者がGoogleの唯一のユーザーでしょうか？実は、その他にもGoogleのユーザーは存在しています。 広告主：Googleは広告主が自らの命令に従うことをよく知っています。Googleは、広告主やサイト運営者に対してポリシーを公開しています。もし彼らがGoogleのポリシーに違反して、好き勝手に利用するとしたら、広告掲載やサイトは強制停止されます。 ボット（クローラ）：Googleは、ボットなどによってサイト上で「通常以上のトラフィックが検出」された場合に、これをブロックします。検索している主体が人間でも、誤検知（False positive）によりブロックされてしまうこともよくあります。 詐欺者：Googleは詐欺サイトもブロックしています。例えば、偽のダウンロードボタンをクリックすると、ランサムウェア（ransomeware）がコンピュータにインストールされるよう仕組んであるサイトなどです。 検索者：Googleの検索エンジンの利用者です。このユーザーたちこそGoogleに利益をもたらしています。彼らが広告をクリックしたり、アプリケーションを利用したり、ソフトウェアをダウンロードすることで、Googleに収益が発生する仕組みになっています。 Googleは、自らの目標や利益に反するユーザーに対しては、ユーザーエクスペリエンスの提供を拒否しているのです。 Googleは、ほとんど全てのユーザーに提供されていますが、Googleのユーザーリストに載っていない人々（ボット）は締め出されます。 広告主が検索者にスパムを送信するとしたら、広告掲載を強制停止されます。Googleは、自らの目標や利益に反するユーザーに対しては、提供を拒否しているのです。 「ユーザーのためのデザイン」は、デザイナーがターゲット・オーディエンスだけに意識を向けるという前提があってこそ有益なアドバイスになることは、十分理解できるかと思います。 しかし、多くのデザイナーがユーザーについて見落としている重要な点は他にもあります。それは次の「UXの間違い3」で述べるとしましょう。   [PR] Webデザインで副業する学習方法を動画で公開中UXの間違い3：フリクションが不十分であること Webデザインにおける「フリクション（friction）」とは、Webサイト（のレイアウトに使われている要素）の利用を阻害することを意味します。 一般にデザイナーたちは、フリクションを悪いものだと考えています。Webサイトを上手く設計しなければ、意図した通りにユーザーが行動しないおそれもあります。こうしたイメージから、デザイナーはフリクションを恐れがちです。 しかし、全てのWebサイトにはフリクションが必要です。   もし音楽を聴いていて、うるさいと感じたらどうしますか？おそらく音量を下げますね？ 同じことがフリクションにも当てはまります。ユーザーは音楽に、フリクションは音量調節のダイヤルに、それぞれ例えることができます。望ましいユーザーだけをWebサイトに集めるために、いわばフリクションというダイヤルで、音量を上げたり下げたり調整するのです。   フリクションを活用しているWebサイトの例を、次にいくつかご紹介します。 Craigslist（クレイグズリスト）：Craigslistは、同じ広告を50回連続で投稿されたりするのを嫌がります。そのため、Ghostingという技術によってフリクションを生み出しています。ユーザーがスパムを送信したり、広告を過度に多数回投稿した場合には、広告はブロックされて誰にも見えないように非表示になります。 Google：Googleはユーザーに自らのポリシーを尊重してもらいたいようです。もしサイトを悪用したり、検索結果を利用してWebスクレイピング（Web scraping）を行えば、「通常と異なる」ユーザーとして検出されます。さらに警告を無視するとブロックされます。 Quora：Q&Aのサイトです。利用ガイドラインはシンプルで、「Be nice, be respectful.（マナーと節度をもって利用すること）」というポリシーを掲げています。このポリシーを無視するユーザーには警告を与え、ブロックまたは利用禁止にします。フリクションを利用することで、他のユーザーにとって安全なサイトであることを保証しているのです。Quoraのサイトのシステムは、ユーザー体験の質を最大限に高めるようにデザインされています。 デザイナーにとってフリクションは、問題となるかもしれません。しかしそれはデザイナーが、フリクションというダイヤルを調整する方法を知らなかったり、またはフリクションが存在すること自体知らないからです。 デザイナーのフリクションに対する理解が不足していると、フリクションに過剰反応してしまったり、皮肉なことに望ましくないユーザーにWebサイトを悪用されることも起こり得ます。   では、フリクションを具体的に実装するとしたら、どのようになるのでしょうか？例を見てみましょう。 問い合わせフォームに、キャプチャを3～4つほど複数設けて、人間であることを判別する 利用に至るまでのステップ数を必要以上に増やすことで、ユーザーをふるいにかける 文字で埋め尽くされたページ、またはデザイン要素がぎっしりと並んだページにする 入力フォームを必要以上に多く設置することで、ユーザーを疲労させ、興味を失わせる（逆に入力フォームを十分に設置しないとしたら、全てのユーザーのアクセスを容易にすることになります。） コンテンツと関連性の低いストックフォトや画像を使うことで、ユーザーがコンテンツの意味を理解する妨げとする ユーザーに個人情報や支払い情報の入力を求める一方で、サイト運営者の顔写真や個人情報などは可能な限り非公開にしておく フリクションは重要な設計であり、その形やサイズは様々ですが、多くのデザイナーが理解に苦戦するのは確かです。   UXの間違い4：上司の指示にいつも忠実であること この間違いを回避するには勇気を要します。 それに加えて、さらに重要なことですが、目標を明確に理解していることも必要です。現在デザインしている要素は、どのような完成形が望ましいのか、開発しているWebサイトの目標は何なのかなどです。   目標に関するこうした質問にクリアで決定的な答えを出しておくことは、必須です その理由は、あなたの上司、会社の役員会、クライアント、関係責任者から、目標に反する要求をされることがあるからです。 相手の要求通りに進めたら良い結果は生まれないと、経験から予測できることもあるかもしれません。当初の目標に反して進めた結果、失敗プロジェクトとなるおそれもあります。もっとも、「指示通りに仕事をこなしてさえいれば、彼らは報酬を支払ってくれるから構わない。」という考えで、上司に協調するのは簡単ですが。   自分の意見を声に出して伝えることが非常に重要です 上司が自分自身のために行動しない場合には、あなたが上司に代わって行動することが重要です。もし上司が、彼ら自身の利益を損なうような指示を出してきたら、あなたの意見を声に出して伝えましょう。悪いニュースを伝えるべき場面です。上司に彼ら自身が犯そうとしている間違いを理解してもらうためです。 もし自分の意見を声に出して伝えないことが習慣化したら、平凡なポートフォリオしか生まれない ほとんどのデザイナーは自分の意見をはっきりと伝えることはありません。仕事を失ったり、キャリアに傷が付くのを恐れているからです。しかし、そのことが逆にこうした事態を招く原因となります。   この間違いに対処する手立てが何もない場合には デザイナーとしてチームに参加したときに、計画やデザインがすでに決定されていた場合にはどうするべきでしょうか？ まずチームの他のメンバーと話し合いを持ちましょう。そして自分の意見をサポートする根拠（例えば、リサーチ、レポート、データなど）を十分に用意した上で、プロジェクトの責任者に意見を伝えましょう。 最初は不可能に思えるかもしれませんが、実際には行うことは可能です。小さなステップから始めて、段階を追ってゆっくりと進めてみましょう。 あなたはデザイナーとしてプロフェッショナルです。デザインツールを活用すれば、他の人が見逃してしまうようなUXの間違いを見つけることもできると思います。間違いを正すことで、複雑なプロセスを、シンプルで美しいものへと作り変えることができるでしょう。 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

Laravelでリクエストを実行する方法【初心者向け】

Laravelでリクエストを実行する方法について解説します。 POST/GETで値を受け渡す流れを実際にプログラムを書いて理解しましょう。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、Laravelに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Laravelでrequestを使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   requestとは クライアント（Webブラウザなど）とサーバー（Webサーバー）はHTTPプロトコルで通信します。 クライアントはサーバーにリクエスト（要求）を送り、サーバーはリクエストに応じたレスポンス（応答）を返します。 HTTPプロトコルには、リクエストを実行するための方法がいくつかあり、最も一般的なのはPOSTメソッドとGETメソッドです。 HTTPリクエストは2つの部分で構成されます。リクエストに関するデータを持つヘッダーと、サーバーに処理させるデータを持つ本文です。 以降は、サーバーに処理させるデータの受渡し方法について説明します。   LaravelでのPOST/GETでの値の受渡し方法 リクエストにはサーバーに処理させるデータを含めることができます。 データは名前と値のペアです。例えばユーザー名なら `username=John` のような形式のデータになります。 リクエストはHTMLのフォームから送信できます。 <form method="POST(またはGET)" … > … <input type="text" name="username" value="" … > … </form> inputなどの要素でname属性にデータの名前を指定します。ユーザーの入力値はvalue属性にセットされます。 このフォームが送信されるとき、リクエストに各データが含まれます。 POSTメソッドの場合、リクエストの本文が以下のようになります。 他のデータ&username=John&他のデータ   GETメソッドの場合、URLに含まれるクエリ文字列が以下のようになります。 http://localhost:8000/users?他のデータ&username=John&他のデータ また、GETメソッドのリクエストは、HTMLのリンクから送信するのが一般的です。 a要素のhref属性にURLを指定しますが、そのクエリ文字列にデータを含めておきます。 <a href="/users?他のデータ&username=John&他のデータ">…</a> コントローラのアクションでは、Laravelのリクエストインスタンスからデータを取得します。 リクエストインスタンスは、アクションの引数で受け取ったり、ヘルパ関数request( )の呼出しにより取得できます。   以下のような方法で、リクエストインスタンスからデータを取得できます。 $request->all(); // 全データを連想配列で取得 $request->only([ 'username', 'password']); // 一部のデータのみを連想配列で取得 $request->except(['credit_card']); // 一部のデータのみ（指定したデータ以外）を連想配列で取得 $request->input('username'); // 個別のデータをinputメソッドにより取得 $request->username; // 個別のデータを動的プロパティにより取得 request('username'); // 個別のデータをヘルパ関数request()により取得   [PR] Webデザインで副業する学習方法を動画で公開中実際にLaravelでリクエストを受け取ってみよう 例として、GETメソッドのリクエストで複数のデータを受け取ってみましょう。 routes/web.phpファイルに以下のようなルートを追加します。 Route::get('/users', function () { $request = request(); // リクエストインスタンスを取得 $data
PHP

AIが変える！インフルエンサー活用と訴求案作成の新時代

インフルエンサーマーケティングは、ブランドの認知度向上や商品・サービスの訴求に効果的な戦略として注目を集めています。しかし、適切なインフルエンサーの選定や効果的な訴求案の作成には、多くの要素を考慮する必要があります。本記事では、ChatGPTを活用してインフルエンサーマーケティングのための最適な訴求案を作成する方法をご紹介します。 生成AIの実務活用スキルを磨きたい方は、無料の生成AIコミュニティ『テックアカデミーGAIナレッジベース』をご活用ください。今すぐ無料登録 インフルエンサーを活用した最適な訴求案の作成方法 ChatGPTを使用してインフルエンサーマーケティングの訴求案を作成する際、以下の要素を考慮することが重要です： 1. インフルエンサーの選定 適切なインフルエンサーを選ぶことは、キャンペーンの成功に不可欠です。ターゲットオーディエンスや商品・サービスの特性に合わせて、適切なインフルエンサーを選定しましょう。 2. コンテンツの形式とプラットフォーム インフルエンサーの強みや、ターゲットオーディエンスの特性に合わせて、最適なコンテンツ形式とプラットフォームを選択します。 3. 目的地または商品・サービス 訴求したい目的地や商品・サービスの特徴を明確にし、それらの魅力を最大限に引き出す方法を考えます。 4. コンテンツの生成方法 インフルエンサーがどのように商品・サービスを体験し、その魅力を伝えるかを具体的に計画します。 5. コンテンツの目的とゴール キャンペーンの具体的な目的（認知度向上、購買促進など）を明確にし、それに沿ったコンテンツ作成を心がけます。 これらの要素を考慮しながら、ChatGPTを活用して効果的な訴求案を作成できます。以下に、具体的なプロンプトの例を紹介します。 プロンプト例：旅行ブランドのインフルエンサーマーケティング # 指示: 以下の条件をもとに、旅行ブランドのインフルエンサーマーケティングキャンペーンのコンテンツ案を生成してください。あなたの役割は、目的地の魅力を伝えるためのインフルエンサーとのコラボレーションを行うことです。 # 条件: - インフルエンサーの選定: 自然環境やアウトドア体験に関心を持つインフルエンサー - コンテンツの形式とプラットフォーム: Instagramのビジュアルコンテンツ（写真や動画）を活用 - 目的地: 山岳リゾート地 - コンテンツの生成方法: インフルエンサーが目的地でのハイキングやキャンプ体験を共有する - コンテンツの目的とゴール: 目的地の美しさとアウトドア体験の魅力を伝え、ターゲットオーディエンスの興味を喚起する   このプロンプトを使用することで、ChatGPTは以下のような具体的なコンテンツ案を生成します： コンテンツ案: インフルエンサーの選定: 自然環境やアウトドア体験に関心を持つインフルエンサーを特定します。 彼らの過去の投稿やプロフィールをチェックし、山岳リゾート地やアウトドア活動に対する関心や経験を評価します。 コンテンツの形式とプラットフォーム: Instagramのビジュアルコンテンツ（写真や動画）を活用します。 インスタグラムのプラットフォーム上で、魅力的な写真や動画を通じて目的地の魅力を伝えます。 目的地: 山岳リゾート地: 山岳リゾート地の美しい風景や自然環境を活かします。 山々の壮大な景色、清らかな湖、美しい森林など、目的地の魅力を強調します。 コンテンツの生成方法: インフルエンサーが目的地でのハイキングやキャンプ体験を共有します。 ハイキングの途中での景色や自然の驚異、キャンプファイヤーの雰囲気など、リゾート地でのアウトドア体験を捉えます。 インフルエンサーの体験や感情を通じて、視聴者に目的地への興味を引き起こします。 コンテンツの目的とゴール: 目的地の美しさとアウトドア体験の魅力を伝えます。 インフルエンサーの投稿を通じて、ターゲットオーディエンスの興味を喚起します。 インフルエンサーのプロフィールへのリンクやハッシュタグを活用し、ターゲットオーディエンスのリゾート地への訪問や関与を促します。   このように、ChatGPTを活用することで、インフルエンサーマーケティングの詳細な訴求案を効率的に作成することができます。無料版のChatGPTでも十分に活用できますが、有料版を使用するとさらに高速かつ高レベルの出力が可能になります。 まとめ インフルエンサーを活用した最適な訴求案の作成には、多くの要素を考慮する必要があります。ChatGPTを活用することで、これらの要素を効果的に組み合わせ、具体的で魅力的な訴求案を作成することができます。 ただし、生成AIの出力はあくまでも参考程度に留め、最終的な判断や調整は人間が行うことが重要です。インフルエンサーマーケティングの成功には、AIの活用と人間の創造性やブランド理解のバランスが鍵となります。 [PR] Webデザインで副業する学習方法を動画で公開中生成AIの実務活用で悩んでいる方へ ChatGPTなどの生成AIを業務に取り入れてみたものの、思うような結果が得られない。あるいは、ビジネスでの活用に限界を感じている。そんな方々にお勧めしたいのが、『テックアカデミーGAIナレッジベース』です。 このコミュニティは、生成AIの実務活用に特化した知識と経験の宝庫です。以下のような特徴があります： 500件以上の実務で即活用できるプロンプト集 プロのエンジニアに生成AIについて直接質問可能 同じ関心を持つビジネスパーソンとの交流の場 通常、このレベルの生成AIコミュニティには10万円程度の費用がかかります。しかし、『テックアカデミーGAIナレッジベース』は完全無料でご利用いただけます。 生成AIの可能性を最大限に引き出し、ビジネスの競争力を高めたい方にとって、このチャンスを逃す手はありません。今すぐ登録して、生成AIの実務活用スキルを飛躍的に向上させましょう。 今すぐ無料登録
生成AI・ChatGPT

JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】

JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次コンフリクトとはなぜコンフリクトが起こるのか、起こりやすい場面コンフリクトを解消する方法コンフリクトを起こさないための方法を知ろう監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptによるファイルの読み込み Webサイトでは、ファイルをアップロードすることでアプリケーションの機能を利用することがよくあります。 例えばマイページがあるようなサイトで、自身のプロフィール画像を登録するために画像ファイルを登録する時には、ファイルをアップロードすることになります。 本記事では、ファイルの読み込み方法と、読み込んだ後の処理の方法について、ファイルの種類別に解説していきます。   実際にファイルを読み込んでみよう ファイルを読み込んで、JavaScriptで取得するまでの一連の手順を紹介します。   1．input要素をHTMLに記述する ファイルを読み込むには、まずHTMLに要素を追加する必要があります。 追加する要素はinput要素で、type属性に”file”を指定します。 また、あとでJavaScriptで取得できるよう、任意のidをつけておきましょう。 <input id="upload-file" type="file">   ブラウザで確認してみると、ファイルを選択できるボタンが設置されています。 「ファイルを選択」より任意のファイルを選ぶと、ブラウザ内に自動的にファイルが読み込まれます。   2．input要素をJavaScript側で取得する 1で指定したid属性の値によって、input要素を取得します。 idによる要素の取得には、document.getElementByIdを用います。 const input = document.getElementById('upload-file');   3．ファイルの読み込みを検知する ファイルを取得するには、「input要素にファイルが指定された」というイベントを検知する必要があります。 ファイルのアップロードは、changeというイベント名で取得できます。 changeイベントを取得するには、addEventListenerを用いて以下のように書きます。 input.addEventListener('change', (e) => { console.log('ファイルが検知された！'); }); 1行目の後半から始まる関数は、イベントリスナの「コールバック関数」と呼ばれ、指定したイベントが発生したタイミングで実行されます。 コールバック関数の関数の引数として、 e という変数が指定されていますね。 引数 e は、ファイルの情報を取得するための重要な引数です。 eについて、次の項目で詳しく説明します。   4．読み込まれたファイルを取得する 3では、「ファイルが読み込まれた」という状態を検知しましたが、まだファイルの中身は取得できていません。 アップロードされたファイルの情報を得るには、イベントリスナのコールバック関数の引数を利用します。 input.addEventListener('change', (e) => { console.log(e.target.files[0]); }); コールバック関数の引数（ここではe）には、発生したイベントに関する情報が入っています。 そのなかで、e.target.filesは、アップロードされたファイルが配列になっています。 アップロードされたファイルが1つならば、e.target.files[0]でそのファイルを取得できます。 ※複数ファイルのアップロードについては本記事の最後に紹介します。   一連の処理を行ってみよう それでは、解説した1〜4の処理を実際に行ってみましょう。 完成形のコードは以下の通りです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id="upload-file" type="file"> <script> //JavaScriptの記述
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSのコンフリクトを解消する方法を現役デザイナーが解説【初心者向け】