エイトビー株式会社

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

エイトビー株式会社

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

記事一覧

【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デザイナーの道を歩んではや○年… 「どっぷり…

【比較一覧】おすすめWebフォントサービス8選!

前回の記事でWebフォントがデザインに与える印象についてお話をさせていただきました。 では実際「Webフォントにはどんな種類があるの?」ということで、紹介していきまし…

サイトの印象はフォントで決まる!Webフォントでサイトデザインの可能性を広げよう!

Webサイトの印象を大きく左右するフォントは、サイトをデザインをする上でとても重要な要素となります。 近年主流になりつつある「Webフォント」を効果的に活用しながら、…

未経験から第二新卒でwebディレクターになった話

webディレクター。 なんとなく肩書は格好良いけど、何をするんだろう? そもそも未経験でもwebディレクターになれるの? そんな悩みを持っている就活生や、転職を考えてい…

【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をすっ飛ばしての

もっとみる
【比較一覧】おすすめWebフォントサービス8選!

【比較一覧】おすすめWebフォントサービス8選!

前回の記事でWebフォントがデザインに与える印象についてお話をさせていただきました。

では実際「Webフォントにはどんな種類があるの?」ということで、紹介していきましょう。

Webフォントサービス一覧Google Fonts

Googleが提供するWebフォントのサービスです。以前は日本語フォントの数は限られていましたが、ここ最近はその種類も増えてきています。何より無料で利用でき、様々な言語

もっとみる
サイトの印象はフォントで決まる!Webフォントでサイトデザインの可能性を広げよう!

サイトの印象はフォントで決まる!Webフォントでサイトデザインの可能性を広げよう!

Webサイトの印象を大きく左右するフォントは、サイトをデザインをする上でとても重要な要素となります。
近年主流になりつつある「Webフォント」を効果的に活用しながら、サイトのデザインをグッと素敵なものに底上げしましょう!
この記事ではフォントが与える印象の違いを実例を交えながら、Webフォントの魅力を伝えて行きます。

デバイスフォントとWebフォントWebサイトで文字を表示させる方法は

デバイ

もっとみる
未経験から第二新卒でwebディレクターになった話

未経験から第二新卒でwebディレクターになった話

webディレクター。
なんとなく肩書は格好良いけど、何をするんだろう?
そもそも未経験でもwebディレクターになれるの?
そんな悩みを持っている就活生や、転職を考えている人がいると聞いたので、自分の経歴を交えながら、webディレクターの実態を伝えようと思う。
webディレクターを職業に考えている人は是非参考にしてほしい。

自己紹介。
フクイサダトモ。webディレクター。7年目。32歳。
webデ

もっとみる