タグアーカイブ: エンジニア

【HP作成】Webデザインの基礎！【配色編】

に が投稿

はじめに

こんにちは、Itoopの佐藤です。

季節の変わり目ということもあり、暖かい日が続いたかと思ったら急に寒くなる日もあるので、引き続き体調に気を付けて過ごしていきましょう。

今回はWebデザインの「色」について書いていきます。

過去にレイアウト編についてまとめていますので、そちらもご参照ください。

関連記事：【HP作成】Webデザインの基礎！【レイアウト編】

色の重要さ

Webデザインを作る上で配色は非常に重要で、Webサイトを見る人の心を動かす要因の1つでもあります。

レイアウト編でも参考としていた「いちばんよくわかるWebデザインの基本きちんと入門」という本でも各色についてのイメージをわかりやすく学習することができます。

URL：https://www.sbcr.jp/product/4797389654/

各色の与える印象

各色が与える印象についてはそれぞれ以下のようになっています。

赤

情熱、興奮、注意などの意味を持ち、強い印象を与えて購買意欲をかきたてる効果がある

黄

楽しい、元気、好奇心などの意味を持った色。黒と組み合わせて警告を促す色としても扱われる

緑

自然、安心、平和などの意味を持った色。山や植物といった自然を表す色であり、リラックス効果を生む色でもある

青

清潔、冷静、誠実などの意味を持った色。海や空といったイメージもあり、安心感を与える

ピンク

可憐、好意、幸福などの意味を持った色。トーンや配色によって対象年齢を変えることができる

黒

高貴、洗練、不安などの意味を持った色。様々な色に会う色で、組み合わせによって色をより明るく見せる効果もある

白

清潔、洗練、献身などの意味を持った色。他の色を引き立てる効果を持ち、ベースカラーとして多く採用されている

おわりに

いかがでしたでしょうか。

今回はよく見かける色の与える印象についてまとめましたが、色によってもたらされる効果は様々あることをあらためて感じました。

作成するデザインに応じて、適切な色を選択しましょう。

当記事がHP作成のお役に立てれば幸いです。

VRゴーグルの活用方法

に が投稿

はじめに

こんにちは。IToopの技術担当の橋本です。

みなさんは、VRゴーグルってご存知ですか？

最近では、VRゴーグルを使ったゲームやイベントが開催されるなど、目にしたことがある人や身近に感じ始めている人が増えているように感じます。

とはいえ、まだまだ馴染みがないという方も沢山いるのではないでしょうか。

今回は、VRゴーグルとは何か、どう活用していけるのか、これから知っていきたい方向けに紹介をしていきます！

VRとは？

そもそもVRとは何かについてお話をしていきます。

VRとは、「Virtua Reality 」の略で、「仮想現実」とも訳されております。作り上げられた仮想的な世界の中に入り込んだような、現実世界にいる感覚を得られる技術です。

VRを体験するためには様々な方法がありますが、ヘッドマウントディスプレイ(HMD)と呼ばれる、いわゆるVRゴーグル型のデバイスが利用されることが多いです。VRゴーグルだけでも、数十社の製品が販売されています。

活用方法①スポーツ観戦

VRゴーグルの活用方法として、「スポーツ観戦」が挙げられます。オリンピックでの需要拡大や5Gが台頭してきたことにより、より注目が高まっています。

自宅にいながら特等席にて臨場感のある試合が楽しめること、複数人集まっても密を回避しながら楽しめることが最大限の魅力です。

アーティストのライブ観戦でも同様に楽しむことができます。

活用方法②旅行

旅行に行きづらいご時世ですが、VRゴーグルを活用することで、擬似的に旅行体験が可能です。遠方にいる友達やパートナーとも、一緒に同行しているように旅行ができたり、バーチャル上のキャラクターと旅行に行くような体験も可能です。

実際に、旅行会社や航空会社でも以前からVRを取り入れた旅行を実現しています。興味がある方は以下も参照してみてください。

・JTB：バーチャル修学旅行

https://www.jtbbwt.com/education/service/solution/jh/domestic/school-trip/virtual-trip/

・ANA：ANA VIRTUAL TRIP

https://www.anahd.co.jp/group/pr/201803/20180320.html

活用方法③実習や訓練

VRを用いて医療実習や防災訓練を実施することも可能です。

医療現場での研修医の手術のシミュレーションに用いたり、患者さんに視覚的に説明したりすることにも繋がり、より安全性が高まっています。

災害体験やその訓練にも用いることができ、研修センターに行かずとも安全面を考慮した体験が可能です。

おわりに

いかがでしたでしょうか？VRゴーグルは、趣味だけにとどまらず、私たちの生活の安全にも役立っています。そう遠くない未来に、スマートフォンと同様に自宅でも楽しめる1コンテンツとして身近にあるのが当たり前の時代が来るかもしれませんね。みなさんの興味をもつきっかけになれば幸いです。

【必見！超キャリアUP】システム開発者必須！要件定義書とは

に が投稿

はじめに

こんにちは、Itoop（アイティープ）の広報担当の黒澤です！

皆様はシステムの要件定義を書いたこと、または読んだことはありますか？

システム開発において必須になるのが「要件定義書」です。

今回は要件定義の書き方について書いていきます。

要件定義書とは

システム開発の最初にする作業で、やることとやらないことを明確にします。

お客様と「言った/言ってない」を避けるために、画面設計、DBなど細かい話はせず、「何を実現したいのか」、「どんなシステムなのか」など大まかに何を作ろうとしているのかを明確にします。

要件定義書の項目

要件定義書は大きく「業務要件」「機能要件」「非機能要件」の3つで構成されます。

「業務要件」はユーザー、管理者がどうやって使うのかなど「何の為のシステム」なのかを決めます。

「機能要件」はログイン機能があるのか、メニューバーがあるのかシステムの機能的な要件を決めます。

「非機能要件」は性能や、可用性、拡張性、セキュリティ対策、運用保守など機能以外の要件を決めます。

必要スキル

プログラミング、ハードウェアの技術よりもコミュニケーション能力が重要視されます。お客様と共通認識をすり合わせながら、課題解決を目指していきます。

お客様のITリテラシーによりますが、どうやって実現するか提案力もあればベターです。

システムへの理解度も重要で、どこがどう動くのか全体の動きを理解することも必要です。

お客様への提案も課題解決もシステム開発経験、知識が土台になってできることなので、豊富な現場経験が必須です。

終わりに

いかがでしたでしょうか？

今回は、簡単にですが要件定義について紹介しました。

システム開発において責任ある工程で、その分年収アップにも繋がります。

チャンスがあれば是非チャレンジしてみてください。

それでは良い一日をお過ごしください。

【超基礎知識編】ドメイン名って何？？

に が投稿

はじめに

こんにちは。IToopの技術担当の橋本です。

みなさんは、ドメイン名って聞いたことがありますか？

どこかで聞いたことがあるような気がしますが、説明を求められたら回答に困る人も多いのではないでしょうか？

今回はそんな基礎知識、ドメイン名の話をしていきます。

ドメイン名についてほとんど知らないという方向けやおさらいをしたい方向けに概要を書きますので、そのような方の目に止まれば幸いです。

ドメイン名とは？

以前のブログにて、IPアドレスが何かについて紹介をしました。IPアドレスは、簡単にいうと「ネットワーク上の住所」のことです。但し、この住所は「192.168.1.1」といったように数字のみで構成されています。人間にとってただの数字の羅列は構造上覚えにくいという難点がありました。

そこで登場するのが、「ドメイン名」です。

ドメイン名は、人間が覚えやすくするために用いたインターネット上の住所のことです。「www.itoop.co.jp」といった表記をみなさんもみたことがあるのではないでしょうか？

どうやってIPアドレスとドメイン名を紐付けしているの？

コンピュータの構造上、0か1のみ判別ができ、認識するのはあくまでも数字です。そのため、コンピュータで通信するにはやはりIPアドレスを用いる必要があります。

そのIPアドレスとドメイン名を紐づけるのがDNS(Domain Name System)です。簡単に言うと、電話帳のようなものです。電話帳には「◯◯さん　090-△△△-×××」といった形で名前と電話番号が紐付けされていますよね。

DNS機能をもつサーバーも同様で、「www.itoop.co.jp」といったドメイン名(人間用の住所)と「192.168.1.1」といったIPアドレス(コンピュータの住所)が紐付けされて管理されています。インターネット上で検索した際に、このサーバーにアクセスをし、IPアドレスを教えてもらうことで接続したいサイトを見ることができます。DNSはこれだけで数時間語れるくらい複雑なものなので、興味をもった方は是非調べてみてください！

自分でドメインを取得することができる！？

ドメイン名って何となく企業が所有しているもの、自分にはあまり関係ないと思っている方はいませんか？実はドメイン名は契約をすることで、簡単に個人でも取得することができます。

「www.itoop.co.jp」の「itoop」の部分を自分で決めることができ、こうしたドメインを「独自ドメイン」と言います。因みに、「co」は会社(company略)、「jp」は日本(japanの略)で、co.jpは日本の会社を意味しています。

独自ドメインを取得するメリットは簡単にあげると、3点です。

①独自ドメインをもつメールアドレスを作成できる

会社の＠以降のメールアドレスが統一されているのはこのためです。

②URLやメールアドレスを不変のものにできる

サーバーを入れ替える場合でも、同様のアドレスを用いることができるのは大きなメリットです。

③信頼度の向上

無料で誰でも作成できるURLよりも、ブランド力を上げ、より信頼度の高いサイトと認識されます。

おわりに

いかがでしたでしょうか。簡潔にまとめましたが、意外と身近なところに存在しているものだということがわかりましたね。皆さまの何か興味をもつきっかけになれれば幸いです。

【HP作成】WordPressにおけるCSSの活用方法

に が投稿

ご挨拶

あけましておめでとうございます。Itoopの佐藤です。

ブログを始めてからあっという間に半年が経ち、時間が過ぎるのが早いなと感じますね。

早速ですが、今回はWordpressでは頻繁に活用することになるCSSについてです。

Webデザインを覚えようと学習している友達がおり、その中で自分が覚えたことを伝えたときに「もっと早く知りたかった」と話があったため、そういった方々のために書いていきます。

何に困っていたのか

今回友達が困っていたことですが、トップページに表示する文字のサイズを行によって変更するといった、「簡単にできそうなのに、うまく解決する方法がわからない」ようなことでした。

かつて自分も困ったことがあったものでしたが、そこで利用したのがCSSになります。

CSSの利用方法

CSSは対象となる箇所にIDを割り振ることで、その部分のみを指定して文字のサイズなどを変更することが可能です

IDの振り方は以下になります。

上記のように「<p id = “任意の文字列”>xxxxxxx</p>」と記載します。

その後、CSSにて以下のように記述します。

上記の例はフォントサイズを36ピクセルに変更しています。

例えばWordpressの外観デザイン時に、追加CSSに記述すると変更することが可能です。

おわりに

いかがでしたでしょうか。

簡潔にまとめましたが、このやり方を教えていただいたときにはこんな簡単にできるのかと驚きました。

今回のやり方を用いることにより、HTML編集で様々な箇所にIDを割り振ることができるため、より自由にデザインすることが可能です。

特にWordpressを利用して間もない方の力になれれば幸いです。

今年も一年、よろしくお願いいたします。

【HP作成】Webデザインの基礎！【レイアウト編⑤後編】

に が投稿

はじめに

こんにちは。Itoopの佐藤です。

厳しい寒さが続く季節になってきましたね。体調管理はしっかりした状態で年末年始を迎えましょう。

前回に引き続き、レスポンシブ対応について書いていきます。

前回記事：【HP作成】Webデザインの基礎！【レイアウト編⑤前編】

後編は具体的なレイアウトについて説明します。

レスポンシブWebデザイン向けのレイアウト

レイアウト編③にて「スマートフォン」や「タブレット」など多くのデバイスで対応しやすい「グリッドレイアウト」について説明いたしました。

今回は、グリッドレイアウトを用いたレスポンシブ対応について説明します。

レイアウト編③：【HP作成】Webデザインの基礎！【レイアウト編③】

各デバイス毎のレイアウト

各デバイス毎のレイアウトを検討する際には、PC向けのレイアウトから作成し、タブレット→スマートフォンと作成していきます。

1.PC向けのレイアウト

ヘッダーを配置し、中央部にメインコンテンツ、サイドコンテンツが配置され、フッターが配置するのがPC向けのレイアウトにおいては一般的です。

2.タブレット向けのレイアウト

タブレットにおいては、PC向けのレイアウトではサイドコンテンツが入りきらない場合があります。

その場合はメインコンテンツを横一杯に表示し、サイドコンテンツをその下に配置することで、タブレット向けに最適化されたレイアウトになります。

3.スマートフォン向けのレイアウト

基本はタブレットとそれほど大差はありません。しかし、表示するコンテンツをタブレット向けのレイアウトと同じ量にすると縦長になりすぎてしまうことがあります。

一部内容を非表示にして縦長になりすぎないようにすることも大切になります。非表示にするかどうかは、それぞれの目的に応じて選択しましょう。

おわりに

デバイス毎のレイアウトについて説明しましたが、グリッドレイアウトだとデザインの段階で各デバイス毎のレイアウトを想定しやすくなります。

どのユーザーがどのデバイスを用いて見ているのかを考えて各デバイス毎のレイアウトを作成していきましょう。

「Webデザインの基礎【レイアウト編】」は以上になります。当記事が、Webデザインに触れ始めた方々の参考になれば幸いです。

【HP作成】Webデザインの基礎！【レイアウト編⑤前編】

に が投稿

はじめに

もうすぐ12月ですね。年末は忙しくなりがちですが、体調に気を付けて過ごしていきましょう。

今回は「レスポンシブ対応」について前編と後編に分けて説明します。

前編は、レスポンシブ対応の説明と、考慮するべき点についてです。

そして、レイアウト編はこれで今回が最後となります。

最後までお付き合いいただけますと幸いです。

→前回記事：【HP作成】Webデザインの基礎！【レイアウト編④】

レスポンシブ対応とは

レスポンシブ対応とは、異なるデバイスでもページのレイアウトやデザインを調整して表示する手法のことで以下2つのメリットがあります

メリット1.デバイス毎にHTMLファイルをつくらないため、1つのHTMLを修正することでどのデバイスで見ても修正が反映されている

これによって、各種デバイスでのHTMLを修正しなければならなかったり、修正もれが発生してしまうといった事態を防ぐことができます。

メリット2.同一のHTMLを利用することからURLが変わらないため、SEO的にもメリットがある

Googleもデザインパターンとしてレスポンシブ対応を推奨しています。

参考：Google検索セントラル,モバイル設定を選択する（https://developers.google.com/search/mobile-sites/mobile-seo/）

レスポンシブ対応を採用する際に考慮するべきこと

様々なメリットもあり、Googleも推奨しておりますが、考慮するべきこともあります。

● 画像サイズは、PC画面でも綺麗に見えるように、大きなサイズを利用する

画像の容量が大きくなるため、スマートフォンでの閲覧時に表示速度が遅くなってしまうことがある

● デザインや実装を行う前に、全てのデバイスでの表示を考慮する

各種デバイスでのブラウザチェック、各デバイス固有のバグ対応や適したレイアウト調整が必要になるため、工数がかかる

おわりに

レスポンシブ対応には良い点はあります。

しかし、何が何でもレスポンシブ対応と決めつけるのではなく、サイト全体のデザインやどのデバイスを使うユーザーに向けてデザインすることが重要になります。

次回は後編、レスポンシブ対応に適したレイアウトについて説明します。

【HP作成】Webデザインの基礎！【レイアウト編④】

に が投稿

寒い日が続くようになり、鍋が美味しい季節になってきましたね。暖かいものを食べて体調を整えていきましょう。

今回も、引き続きレイアウトについてまとめていきます。

第4弾は「視線の導線」についてです。

→前回記事：【HP作成】Webデザインの基礎！【レイアウト編③】

視線の流れを意図したものにする

人は、何かの情報をみるときは左上から右下へ視線が流れていきます。

左上、左下、右上、右下の4つのエリアに分けて考えたとき、特に目に入りやすい左上と右下に重要な要素を配置すると、意図した通りに情報を伝えやすくなるでしょう。

視線誘導における2種類のレイアウト

視線誘導を意識したレイアウトには以下の2つがあります。

①Z型レイアウト

視線の流れが「左上→右上→左下→右下」とＺの形に似ているために、「Z型のレイアウト」と呼ばれています

左上から重要な要素を配置していくレイアウトで、この手法はコンテンツを大きく見せたいプロモーションサイトやスマートフォンアプリなどでよく用いられています。

②F型レイアウト

ヘッダー部にあるロゴやナビゲーションへ視線が移動し、その後見出しや記事へと下に視線が移動していく手法です。

主にECサイトやブログなど、最近のWebサイトでよく用いられています。

おわりに

視線の流れですら、意図されたものがあるということに初めは驚きました。

だからこそ、視線の流れを意識したレイアウトにすることで意図した通りの情報を与えられるのが気付きでした。

これまでの記事で書いたものも駆使して、より良いHP作成に貢献できれば幸いです。

【エンジニア必見！】今注目の「xR」とは！？

に が投稿

こんにちは。

Itoop（アイティープ）の橋本です。

みなさんは、「xR」をご存知でしょうか。

xRとは「x Reality」を略した言葉で、VRなどの「仮想世界と現実世界を融合し、新たな現実（Reality）を生み出す技術の総称です。

現在はゲームやエンターテインメントの分野で多く利用されていますが、5Gの普及にともない、今後さまざまな分野での活用が期待される技術です。

今回は、注目の「xR」について書きたいと思います。

【xR（VR・AR・MR・SR）を知ろう】

ここではまず、VR、AR、MR、SRの内容を紹介します。

VR（Virturl Reality）とは、仮想現実を意味する言葉です。VRゴーグル、VRメガネと呼ばれる専用デバイス（HMD：ヘッドマウントディスプレイ）を装着し、映像を見たり、音声を聞いたりすることで、仮想空間に没入した体験をすることができます。

AR（Augmented Reality）とは、拡張現実を意味する言葉で、スマートフォンのカメラなどを用いて、現実空間に仮想データを表示させる技術です。

MR（Mixed Reality）とは、複合現実を意味する言葉で、ARやVRを発展させた技術です。ヘッドマウントディスプレイ（HMD）を使用し、現実世界に仮想の物体を3Dで表示することができます。

SR（Substitutional Reality）とは、代替現実の意味です。ヘッドマウントディスプレイ（HMD）を使用し、現在の現実世界に「過去に撮影した現実の映像」を投影する技術で、ユーザーは、現実の物体と過去の物体が同時に存在するような空間を体験します。

【急拡大中！？ xR市場】

これまでのxR市場は、ゲーム業界での需要が圧倒的でした。しかし、新型コロナウイルスの影響により対面でのコミュニケーションが制限されたため、対面に近いコミュニケーション手段としてxR技術に注目が集まっています。今後は、バーチャルショッピングや360°のトラベル動画など、消費者として利用できる分野が拡大していくと予想されます。

ビジネスでのxR技術の応用も広がる見込みです。

たとえば、ARやMRを利用した遠隔地からの作業へのニーズも高まっています。xRを利用した遠隔地からの医療サービス、製造業における遠隔作業などが注目されており、さまざまな分野での活用が広がると思われます。

【xRエンジニアの需要も高まる】

xR市場の拡大にともない、VR開発エンジニア、xRアプリケーションエンジニアといった、xRエンジニアの需要も増加しています。

VRやAR・MRの開発にはJava Script、C#、BluePrint、Ruby、GOなどの言語といったプログラミング言語が使われています。これまでエンジニアとして習得したプログラミング言語を活かし、xRエンジニアを目指すこともできるでしょう。

【おわりに】

今回は、今注目のxRについて紹介しましたが、いかがでしたでしょうか。

xRエンジニアの需要が増加している一方で、xRエンジニアとして活躍するためには、3DCGデザインのスキルを身につける必要があります。さらに、開発にはゲームエンジンであるUnreal EngineやUnityが使われているため、こういったツールを使いこなすスキルも必要です。

xRエンジニアを目指すのであれば、今から新たに3DCGデザインやゲームエンジンについて勉強し、スキルを磨くとよいかもしれませんね。

いずれにせよ、xR市場の動向について今後も目が離せません。

この記事がみなさんのお役に立てれば嬉しいです。

【HP作成】Webデザインの基礎！【レイアウト編③】

に が投稿

はじめに

季節の変わり目ということもあり、寒暖差が激しくなってきましたね。体調管理をしっかりしていきましょう。

今回も前回に引き続きレイアウトについてまとめました。

第3弾は「よく用いられる2つのレイアウト」についてです。

前回記事：【HP作成】Webデザインの基礎！【レイアウト編②】

よく使われるレイアウトとは

Webデザインにおけるレイアウトを大きく分けると2つあります。

①グリッドレイアウト
②フリーレイアウト

今回はこの2つについて説明していきます。

①グリッドレイアウトについて

グリッドは「格子状」という意味で、グリッドレイアウトとは、Webデザインにおいては垂直方向と水平方向に画面を分割してレイアウトしていく手法を指します。

グリッドレイアウトの利点は以下の通り。

  • 事前にグリッドを決めておくことで、レイアウト作業が簡単になる
  • 多くの要素が入ったデザインであっても統一性を持たせることができ、整理されたレイアウトに仕上げられる
  • スマートフォンやタブレットなど多くのデバイスに対応しやすい

スマートフォンやタブレットで閲覧するユーザーも増えてきていることから、最近では多くの企業サイトやECサイトで用いられている定番のレイアウトになっています。

②フリーレイアウトについて

フリーレイアウトとは、あらかじめ決められたページ幅でレイアウトしていく手法で、掲載する情報量が多いPC専用サイトなどによく用いられます。

フリーレイアウトにおける利点は以下になります。

  • どのブラウザ幅でもこちらが意図した通りのレイアウトを見せられる
  • 一定の幅で決められているため、閲覧するユーザーの環境をPCに限定できること

固定幅の要素(画像やフォーム、動画など)との兼ね合いに悩むことなく、自由な表現が可能なレイアウトになります。

おわりに

2つのレイアウトを紹介しましたが、コンテンツの内容や対象となるユーザーのデバイスによってどのレイアウトが適切かは変わってきます。

更にスマートフォンの普及によって、Webデザインも多様化してきました。

ターゲットやコンセプトに合わせて使い分けていきましょう