エイトビー株式会社

web制作会社エイトビー。 制作のプロが実際に使用している技術を発信していきます。 \…

エイトビー株式会社

web制作会社エイトビー。 制作のプロが実際に使用している技術を発信していきます。 \採用も募集中!/ 社員の声を通してエイトビーの実態もご紹介します! コーポレートサイト:https://8be.co.jp/|採用サイト:https://recruit.8be.co.jp/

記事一覧

【Webデザイン】 “第5回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

「人はなぜ、そのデザインに惹かれるのか?」 Webデザインは、単なる見た目ではありません。それは、ユーザーの心を捉え、行動を促すための仕掛けが重要になってきます。…

【Webデザイン】 “第4回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

「人はなぜ、そのボタンをクリックしたのか?」 Webデザインは、単に見た目を美しくするだけではありません。ユーザーの心理を理解し、行動を促すための重要な役割を担って…

エイトビーは海外好きが多い!メンバーイチ押しの国5選!

エイトビーという会社は、風通しが良く自由な社風です。そんなエイトビーは、海外好きなメンバーが多いことも特徴のひとつ。彼らが選ぶ、イチ押しの国を5つ紹介します。こ…

【CSS / JS】スムーススクロールの不具合とその対応

【CSS / JS】 今後のスムーススクロールについての続きです。 「便利になったなぁ」と満足感を感じながら実案件で前回のコードを使ってみたのですが、ブラウザチェックの際…

30代で未経験Webディレクターへ転職した話

未経験でWebディレクターを目指そうと思っている、 またはWebディレクターという職種が気になっている方へ。 少しでも私の経験が転職への後押しになればと思い、お話します…

webディレクター・フクイサダトモ

映画の視聴、ディナーの予約、日用品の購入、就職活動、仕事のミーティング。 日常のあらゆることがPCやスマホひとつでデジタル社会の昨今だが、そんなデジタル社会の基盤…

【Webデザイン】 “第3回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

魅力的なデザインに仕上がっていても、「使いにくい」サイトになっていることはありませんか? Webデザインは見た目だけでなくユーザーの使いやすさも重要です。引き続き、…

【CSS】 フレックスボックスとグリッドレイアウトについて改めて考えてみる

この記事では一昔前の方法にも触れつつ、なんとなくやっていた『フレックスボックス、グリッドレイアウトの使い分け』を改めて文章にしてみようと思いました。 昔の手法fl…

【Webデザイン】 “第2回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

魅力的なデザインに仕上がっていても、「使いにくい」サイトになっていることはありませんか? Webデザインは見た目だけでなくユーザーの使いやすさも重要です。前回に引き…

【CSS / JS】 今後のスムーススクロールについて

ページ内のアンカーに飛ぶ際、シュルシュルーと画面がスクロールして目的の場所までスクロールしてくれる『スムーススクロール』は色んなサイトで使われているのでよく目に…

Web業界は子育てママ、パパ向き!?在宅&子育て中のWebディレクターの実情

子育てって本当に楽しいけど、やっぱりもの凄く大変ですよね。 子供中心のライフスタイルに変わり、仕事・プライベート問わず考え方が大きく変わることも。 子育てを機に転…

【Webデザイン】 “第1回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

ステキなデザインに仕上がっていても、「使いにくい」サイトになっていることはありませんか? Webデザインは見た目だけでなくユーザーの使いやすさも重要です。今回はユー…

Windowsしか使ったことがないコーダーがMacに乗り換えた話

MacというPC。 なにかこうキラキラした都会的な印象はないだろうか。 おしゃれでカッコいい感じ。 陰キャがそんなものを使っても許されるのだろか。 私はこれまでWindows…

「エイトビーってぶっちゃけどう?」中途採用で入社したバックエンドエンジニアに聞いてみた!

web制作のにおいても必要不可欠なポジション「バックエンドエンジニア」。 でも、エンジニアからすると、webのプログラマーというのは意外とマイナー、ある意味マニアック…

Three.jsとGSAPでスクロールアニメーションを作ってみた

自社サイトリニューアルにあたり3Dモデルをスクロールに応じて動かすアニメーションを実装しました。 そこで自分の備忘録を兼ねて、その作り方をまとめてみます。 モデル…

【Webデザイン】PhotoshopとFigmaで作り比べ

「いつかはFigma、そろそろFigma」 遅ればせながら、Figmaの波にやっと真っ向から向き合う決意をしました。 PhotoshopとWebデザイナーの道を歩んではや○年… 「どっぷり…

177
【Webデザイン】 “第5回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

【Webデザイン】 “第5回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

「人はなぜ、そのデザインに惹かれるのか?」

Webデザインは、単なる見た目ではありません。それは、ユーザーの心を捉え、行動を促すための仕掛けが重要になってきます。その鍵となるのが、人間の心理を読み解く科学、「認知心理学」です。
「認知心理学」の知見をWebデザインに活かすことで、ユーザーの心理に働きかけ、驚くべき結果を生み出すことができます。
具体的な事例を交えながら、ユーザーの心理を理解したW

もっとみる
【Webデザイン】 “第4回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

【Webデザイン】 “第4回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

「人はなぜ、そのボタンをクリックしたのか?」
Webデザインは、単に見た目を美しくするだけではありません。ユーザーの心理を理解し、行動を促すための重要な役割を担っています。そして、その鍵となるのが「認知心理学」です。
認知心理学の知見をWebデザインに応用することで、ユーザーの心理に働きかける効果的なデザインを実現することができます。
今回も具体的な事例を交えながら、ユーザーの心理を理解したWeb

もっとみる
エイトビーは海外好きが多い!メンバーイチ押しの国5選!

エイトビーは海外好きが多い!メンバーイチ押しの国5選!

エイトビーという会社は、風通しが良く自由な社風です。そんなエイトビーは、海外好きなメンバーが多いことも特徴のひとつ。彼らが選ぶ、イチ押しの国を5つ紹介します。これらの国々は、エイトビーのメンバーが特に愛し、心からおすすめする場所です。どれもが独自の魅力に溢れ、旅行好きなら一度は訪れたいと思わせるでしょう。では、さっそくその国々を紹介していきます。

【ハワイ】とにかく空気がイイ!幸せな気持ちになれ

もっとみる
【CSS / JS】スムーススクロールの不具合とその対応

【CSS / JS】スムーススクロールの不具合とその対応

【CSS / JS】 今後のスムーススクロールについての続きです。
「便利になったなぁ」と満足感を感じながら実案件で前回のコードを使ってみたのですが、ブラウザチェックの際に不具合がみつかりました。
原因の調査と対応策を考えました。

不具合とは不具合の詳細

今回の不具合は、Mac の Safariで発生しました。
内容は目的の場所に移動しないことです。

原因の調査

$('a[href^="#

もっとみる
30代で未経験Webディレクターへ転職した話

30代で未経験Webディレクターへ転職した話

未経験でWebディレクターを目指そうと思っている、
またはWebディレクターという職種が気になっている方へ。
少しでも私の経験が転職への後押しになればと思い、お話します。
個人的な意見も含まれていますので、ご了承ください。

Webディレクターになろうと思ったきっかけ

●これからは紙ではなくWebの時代!
前々からWebの時代と言われていましたが、前職までのクリエイティブの仕事は気に入ってました

もっとみる
webディレクター・フクイサダトモ

webディレクター・フクイサダトモ

映画の視聴、ディナーの予約、日用品の購入、就職活動、仕事のミーティング。
日常のあらゆることがPCやスマホひとつでデジタル社会の昨今だが、そんなデジタル社会の基盤はwebサイトだ。
そしてwebサイトを構築する上で必要なポジションのひとつである「webディレクター」
一体どんな生業なのか。
その実態を探るべく、今回は在宅で働くwebディレクターの一日に密着したので、その模様を紹介しようと思う。

もっとみる
【Webデザイン】 “第3回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

【Webデザイン】 “第3回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

魅力的なデザインに仕上がっていても、「使いにくい」サイトになっていることはありませんか?
Webデザインは見た目だけでなくユーザーの使いやすさも重要です。引き続き、今回もユーザーにとって使いやすいデザインを制作する際の、論理的思考と無意識の心理効果について、「認知心理学」を解説しながら、デザインに応用する際のポイントをいくつかご紹介します。

■前回の記事はこちら

認知心理学とは認知心理学ではユ

もっとみる
【CSS】 フレックスボックスとグリッドレイアウトについて改めて考えてみる

【CSS】 フレックスボックスとグリッドレイアウトについて改めて考えてみる

この記事では一昔前の方法にも触れつつ、なんとなくやっていた『フレックスボックス、グリッドレイアウトの使い分け』を改めて文章にしてみようと思いました。

昔の手法float で横に並べる

最近はあまり使わなくなった手法ですが、一昔前のサイトの修正などで見かけることはあるかもしれません。
float とは、『 要素を指定の方向に浮かせる』プロパティです。多少不具合はあったのですが IE6 でも使え、

もっとみる
【Webデザイン】 “第2回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

【Webデザイン】 “第2回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

魅力的なデザインに仕上がっていても、「使いにくい」サイトになっていることはありませんか?
Webデザインは見た目だけでなくユーザーの使いやすさも重要です。前回に引き続き、今回もユーザーにとって使いやすいデザインを制作する際の、論理的思考と無意識の心理効果について、「認知心理学」を解説しながら、デザインに応用する際のポイントをいくつかご紹介します。

■前回の記事はこちら

認知心理学とは認知心理学

もっとみる
【CSS / JS】 今後のスムーススクロールについて

【CSS / JS】 今後のスムーススクロールについて

ページ内のアンカーに飛ぶ際、シュルシュルーと画面がスクロールして目的の場所までスクロールしてくれる『スムーススクロール』は色んなサイトで使われているのでよく目にすると思います。

従来の実装は JavaScript でしていたわけですが、CSS だけでも実装できるようになったようです。

html { scroll-behavior: smooth;}

少し前から知ってはいたのですが、クロ

もっとみる
Web業界は子育てママ、パパ向き!?在宅&子育て中のWebディレクターの実情

Web業界は子育てママ、パパ向き!?在宅&子育て中のWebディレクターの実情

子育てって本当に楽しいけど、やっぱりもの凄く大変ですよね。
子供中心のライフスタイルに変わり、仕事・プライベート問わず考え方が大きく変わることも。
子育てを機に転職を考えるママ・パパも多いのではないでしょうか?
今回はそんなママ・パパの就職、転職先としてWeb業界ってどうなの?
という疑問に答えるべく、絶賛子育て中の現役Webディレクターが実態をご紹介します。
子育て世代はもちろん、まだ独身の方も

もっとみる
【Webデザイン】 “第1回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

【Webデザイン】 “第1回” 「認知心理学」でデザインをより効果的に!ユーザーを惹きつけるデザインの秘訣 

ステキなデザインに仕上がっていても、「使いにくい」サイトになっていることはありませんか?
Webデザインは見た目だけでなくユーザーの使いやすさも重要です。今回はユーザーにとって使いやすいデザインをする際に考慮している、論理的思考と無意識の心理効果について、「認知心理学」を解説しながら、デザインに応用する際のポイントをいくつかご紹介します。

認知心理学とは認知心理学ではユーザーの視覚認知、記憶、思

もっとみる
Windowsしか使ったことがないコーダーがMacに乗り換えた話

Windowsしか使ったことがないコーダーがMacに乗り換えた話

MacというPC。
なにかこうキラキラした都会的な印象はないだろうか。
おしゃれでカッコいい感じ。
陰キャがそんなものを使っても許されるのだろか。

私はこれまでWindowsしか使ったことがなかった。
中学生の頃ノートPC(WindowsME)を買ってもらってから、高校生でDellのPC(WindowsXP)を通販で、大学生のころ自作PC(WindowsXP)を、社会人になってからはBTOでゲー

もっとみる
「エイトビーってぶっちゃけどう?」中途採用で入社したバックエンドエンジニアに聞いてみた!

「エイトビーってぶっちゃけどう?」中途採用で入社したバックエンドエンジニアに聞いてみた!

web制作のにおいても必要不可欠なポジション「バックエンドエンジニア」。
でも、エンジニアからすると、webのプログラマーというのは意外とマイナー、ある意味マニアックな職種らしい。
・webのバックエンドエンジニアって何をするの?
・エイトビーの場合、他のweb制作会社と何が違う?
・どんなところにやりがいを感じる?
・エイトビーに向いてる人って?
など、新卒、転職問わずweb制作のバックエンドエ

もっとみる
Three.jsとGSAPでスクロールアニメーションを作ってみた

Three.jsとGSAPでスクロールアニメーションを作ってみた

自社サイトリニューアルにあたり3Dモデルをスクロールに応じて動かすアニメーションを実装しました。

そこで自分の備忘録を兼ねて、その作り方をまとめてみます。
モデル表示にはThree.js、アニメーションにはGSAPを使用しています。

Three.jsでモデルを表示するHTMLファイルの作成

公式サイトを参考に、CDNを利用してThree.jsを読み込みます。
canvasというIDを持つ要素

もっとみる
【Webデザイン】PhotoshopとFigmaで作り比べ

【Webデザイン】PhotoshopとFigmaで作り比べ

「いつかはFigma、そろそろFigma」

遅ればせながら、Figmaの波にやっと真っ向から向き合う決意をしました。
PhotoshopとWebデザイナーの道を歩んではや○年…
「どっぷりフォトショ信者のWebデザイナーがFigmaを使ってみた!」感想がこちらです。

まずは学ぶ「感覚でなんとかなるだろ〜」と、Adobe製品を触るテンションでFigmaでの制作を試みましたが、XDをすっ飛ばしての

もっとみる