エイトビー株式会社

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

エイトビー株式会社

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

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

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

エイトビー株式会社

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

      エイトビーという会社は、風通しが良く自由な社風です。そんなエイトビーは、海外好きなメンバーが多いことも特徴のひとつ。彼らが選ぶ、イチ押しの国を5つ紹介します。これらの国々は、エイトビーのメンバーが特に愛し、心からおすすめする場所です。どれもが独自の魅力に溢れ、旅行好きなら一度は訪れたいと思わせるでしょう。では、さっそくその国々を紹介していきます。 【ハワイ】とにかく空気がイイ！幸せな気持ちになれる国！byコンドウハワイ、その名を聞くだけで心がウキウキと躍ります。飛行機から降

      エイトビー株式会社

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

        【CSS / JS】 今後のスムーススクロールについての続きです。 「便利になったなぁ」と満足感を感じながら実案件で前回のコードを使ってみたのですが、ブラウザチェックの際に不具合がみつかりました。 原因の調査と対応策を考えました。 不具合とは不具合の詳細 今回の不具合は、Mac の Safariで発生しました。 内容は目的の場所に移動しないことです。 原因の調査 $('a[href^="#"]').on('click', function () { const

        エイトビー株式会社

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

          未経験でWebディレクターを目指そうと思っている、 またはWebディレクターという職種が気になっている方へ。 少しでも私の経験が転職への後押しになればと思い、お話します。 個人的な意見も含まれていますので、ご了承ください。 Webディレクターになろうと思ったきっかけ ●これからは紙ではなくWebの時代！ 前々からWebの時代と言われていましたが、前職までのクリエイティブの仕事は気に入ってました。印刷、空間、デジタルと一通り携わりましたが、前職が特にWebに弱く、自分の中で

          エイトビー株式会社

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

        エイトビー株式会社

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

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

          エイトビー株式会社

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

          エイトビー株式会社

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

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

          エイトビー株式会社

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

          エイトビー株式会社

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

          この記事では一昔前の方法にも触れつつ、なんとなくやっていた『フレックスボックス、グリッドレイアウトの使い分け』を改めて文章にしてみようと思いました。 昔の手法float で横に並べる 最近はあまり使わなくなった手法ですが、一昔前のサイトの修正などで見かけることはあるかもしれません。 float とは、『 要素を指定の方向に浮かせる』プロパティです。多少不具合はあったのですが IE6 でも使え、長らく横並びはこれが主流でした。 display で横に並べる displa

          エイトビー株式会社

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

          エイトビー株式会社

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

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

          エイトビー株式会社

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

          エイトビー株式会社

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

          ページ内のアンカーに飛ぶ際、シュルシュルーと画面がスクロールして目的の場所までスクロールしてくれる『スムーススクロール』は色んなサイトで使われているのでよく目にすると思います。 従来の実装は JavaScript でしていたわけですが、CSS だけでも実装できるようになったようです。 html { scroll-behavior: smooth;} 少し前から知ってはいたのですが、クロスブラウザ対応を考慮するとSafari とIE に未対応なので実務には使えないも

          エイトビー株式会社

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

          エイトビー株式会社

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

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

          エイトビー株式会社

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

          エイトビー株式会社

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

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

          エイトビー株式会社

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

          エイトビー株式会社

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

          MacというPC。 なにかこうキラキラした都会的な印象はないだろうか。 おしゃれでカッコいい感じ。 陰キャがそんなものを使っても許されるのだろか。 私はこれまでWindowsしか使ったことがなかった。 中学生の頃ノートPC（WindowsME）を買ってもらってから、高校生でDellのPC（WindowsXP）を通販で、大学生のころ自作PC（WindowsXP）を、社会人になってからはBTOでゲーミングPC（Windows7、Windows10）を購入。 すべてWindows

          エイトビー株式会社

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

          エイトビー株式会社

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

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

          エイトビー株式会社

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

          エイトビー株式会社

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

          自社サイトリニューアルにあたり3Dモデルをスクロールに応じて動かすアニメーションを実装しました。 そこで自分の備忘録を兼ねて、その作り方をまとめてみます。 モデル表示にはThree.js、アニメーションにはGSAPを使用しています。 Three.jsでモデルを表示するHTMLファイルの作成 公式サイトを参考に、CDNを利用してThree.jsを読み込みます。 canvasというIDを持つ要素を用意しておきます。 <!DOCTYPE html><html lang="j

          エイトビー株式会社

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

          エイトビー株式会社

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

          「いつかはFigma、そろそろFigma」 遅ればせながら、Figmaの波にやっと真っ向から向き合う決意をしました。 PhotoshopとWebデザイナーの道を歩んではや○年… 「どっぷりフォトショ信者のWebデザイナーがFigmaを使ってみた！」感想がこちらです。 まずは学ぶ「感覚でなんとかなるだろ〜」と、Adobe製品を触るテンションでFigmaでの制作を試みましたが、XDをすっ飛ばしてのFigmaというのもあり、その安直な姿勢は即打ち砕かれました（笑）画面構成を見て

          エイトビー株式会社

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

          エイトビー株式会社

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

          前回の記事でWebフォントがデザインに与える印象についてお話をさせていただきました。 では実際「Webフォントにはどんな種類があるの？」ということで、紹介していきましょう。 Webフォントサービス一覧Google Fonts Googleが提供するWebフォントのサービスです。以前は日本語フォントの数は限られていましたが、ここ最近はその種類も増えてきています。何より無料で利用でき、様々な言語のフォントにも対応している点が大きな特徴です。 提供会社 Google 利用

          エイトビー株式会社

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

          エイトビー株式会社