Raccoon Tech Blog [株式会社ラクーンホールディングス技術戦略部ブログ]

駆け出しデザイナーに知ってほしい、コミュニケーションのコツ

今回は駆け出しデザイナーに知っておいて欲しい、デザイン制作をするうえで役立つコミュニケーションのコツをお教えしたいと思います。私がデザイナーとして経験してきた成功や失敗がベースになっていますので、一般的に定説とされている内容とは若干違いがあるかもしれませんが参考になれば嬉しく思います！デザイナーに求めらるコミュニケーションスキルデザイナーと聞くと表現スキルがすごい人と真っ先に想像しがちで

2023.5.24

パスワードにさよなら？スマホ・PCで顔や指紋認証でログイン　Passkey認証ができるWebサイトの作りかた

エンジニアの皆様は、ログイン機能が必要なサイトの「ログイン方法」の要件として何を思い浮かべますか？多くの方はID/パスワードでの認証を一番に思いつくのではないかと思います。 ID/パスワード認証はポピュラーな認証方法ですが、パスワードの漏洩からの不正アクセスのリスクや忘れてしまったときの不便さがあります。そこで今回は、Passkey認証のできるサイトの作り方をフロントエンドの実装にフォーカスし

2023.4.28

type=”file”のinputタグをJSで操作する方法

今回は私が最近担当した案件で苦労した、type="file"のinputの値と全く同じ形式のデータを０から作る方法と、データをフォームでアップロードする方法各種について書いていこうと思います！ input type="file"について基本的にinput type="file"の値というのは、type="text"などのほかのinput要素と違い変更したり設定したりすることはできません。も

2023.4.26

タグマネージャでGA4を設定するときにやっておいた方が良いこと

今回はエンジニアとビジネスサイドの双方の立場から見た、GoogleタグマネージャとGA4（Google Analytics プロパティ4）のオススメ設定を紹介します。ユニバーサルアナリティクスの終了に伴ってGA4をタグマネージャを利用して設定する方が増えていることと思います。タグマネージャは便利なのですが、1つ問題点としてタグマネージャ経由でGA4を埋め込んだ状態で任意のイベントを記録しよう

2023.4.24

エンジニアはスクラムマスターの夢を見るか？～なんちゃってアジャイルからの脱却とそれにまつわるアレコレ～

突然ですが、皆さんの組織ではアジャイル開発を行っていますか？　恐らく程度の差はあれど、かなり多くの会社でアジャイル開発を少なからず取り入れた開発を行っているのではないかと思います。でも・・・・、それ本当にアジャイル開発になっていますか？　こんな👇感想が出てくる「なんちゃってアジャイル」になってしまっていませんか？「アジャイル開発は納期を定めないから or 最初に要件を全て決めなくて済む

2023.4.20

今日から書けるSass(SCSS)入門！

今回は社内でも導入され始めている、Sassについて簡単にまとめてみようと思います。これを読めばとりあえず今日からSassの基礎的な書き方はばっちりです！ (環境構築などは今回は触れません) Sass(SCSS)とは Sassとは「Syntactically Awesome StyleSheets」の略称で、CSSの拡張言語です。 CSSをより便利に見やすく使えるようにしたようなもので、基本的

2023.4.12

デザイン

今さら聞けない！社内印刷をすると余白ができる理由とは

本記事を書くきっかけ日々社内の様々な資料や販促物を作成するインハウスデザイナーの筆者が良く言われる言葉があります。「これフチに余白ができてしまうんだけど、余白をなくして印刷することはできますか？」資料を会社のプリンターで印刷したり、取引先へデザインの試し刷りを依頼した際などに、似たような質問をされた経験はありませんか？この余白というのは、紙面のフチにインクやトナーが乗らず白色のまま

2023.4.3

CSS4の疑似クラス使ってますか？

皆さまCSS4の疑似クラス使ってますか？発表されたばかりの頃は対応ブラウザが少なく後回しにされがちですが、そろそろ対応ブラウザも多くなってきたので色々な疑似クラスを紹介していきたいと思います。ちなみにCSS4という規格は存在せず、Level4のモジュールを総称してCSS4といわれています。 :has() 指定したセレクターがある場合、その親要素にスタイルを適用することができます。ブラウザ

2023.3.31

デザイン

【地味に便利】Photoshop2023の新機能

今回はPhotoshop2023版でバージョンアップされた機能についてご紹介したいと思います。その中でも「選択機能の向上」と「ワンクリックで削除して塗りつぶし」をご紹介したいと思います。選択機能の向上オブジェクト選択ツールが強化されたことでより簡単に画像上の物体を選択できるようになりました。パワーアップしたAIの力でより正確に空、水、自然の地面、植物、建物などの要素をワンクリックで選択

2023.3.29

デザイン

dialogタグでセマンティックにモーダルを作成するには

新しく追加されたdialogタグの特徴に触れつつ弊社のサイトで使われているモーダルをつくってみます。対応ブラウザ執筆時のSafariバージョンが16.xxのため、気になるのはSafariくらいでしょうか。ブラウザバージョン Safari 15.4 Safari ios 15.4 Chrome 37 Firefox 98

2023.3.28

基本のcss疑似クラス:has()を振り返ってみよう！

今回は基本のcss、疑似クラス:has()について振り返ってみたいと思います。 :has()の使い方子要素の中に指定した要素がある場合にスタイルを利かせる事ができます。例えば以下のようなhtml,cssだと、 html <div class="hoge"> <p></p> <p></p> </div>