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>
2023.3.28
脱！配色難民～色選びのときに見るツール8選～
デザインをしていく中で配色難民（色選びに悩んで途方に暮れる民）になったことがあるデザイナーも多いのではないでしょうか？ 私もその一人です。 何となく色を選んでみたけどこれでいいのかわからない メインカラーは決まったもののアイコンや見出しなどでどの色を使えばいいのかわからない そもそもどんな色を使ったらいいかわからない などなど。 そんなときに私が参考にしているデザ
2023.3.27
【若いデザイナー向け】やったほうが成長に繋がることをご紹介！
デザイン戦略部の楊です。 19年に新卒で入社して4年目になりました。 まだデザイナーとして経験が豊富とまでは言えないですが、ちょうど新人デザイナーからある程度まで成長してきた自分から、 新卒の時から、これをやって成長に繋がったことをお話しさせていただきます！ では、早速ご紹介いたします。 依頼者にヒヤリングする時にやったほうがいいこと 下記４つポイントを必ず聞く 様々な案件により、ヒヤリング
担当サービスのマスコットキャラクターのロゴ作ってみた
私は株式会社ラクーンで運用しているスーパーデリバリーのデザインを担当しています。 スーパーデリバリーにはマスコットキャラクターのスーデリちゃんがいます。 名前：スーデリちゃん 性別：不明 国籍：ドバイ この記事を書くにあたってスーデリちゃんのプロフィールを調べましたが、どうやらスーデリちゃんの国籍はドバイだそうです。なんで？ とっても可愛いスーデリちゃんをもっと知ってほしい スー
Photoshopで車の色を変えてみよう
かっこいい車の画像を見つけたけど、車の色を変えたいな…そんなときありますよね。（ありますよね？） 今回は、そんなときに車の画像の色を変える便利な方法を３つご紹介します。 その1.色調補正の「色の置き換え」で色を置き換える Photoshopで色を変えたい画像を開き、色を変えたい部分を選択します。 メニュー「イメージ」→「色調補正」→「色の置き換え」を選択します。 スポイトツールで変えたい
2023.3.27
【メリットだらけ！？】WebPでサイトのパフォーマンスを向上！
突然ですが、WebP（ウェッピー）という画像フォーマットをご存じでしょうか？実はWebサイトにおいてすごく「優秀」な画像フォーマットなんです！ では具体的にどこが「優秀」なのか。簡単に紹介していきます！ WebP（ウェッピー）とは？ WebPの概要 Googleが開発した新しい画像フォーマット。 拡張子は「.webp」で表記され、「ウェッピー」と読みます。 ウェッピー
文字をオブジェクトの上下中央に配置できる「字形の境界に整列」が地味に便利【Illustrator】
たびたび便利にアップデートされるIllustrator、バージョン24.3から「字形の境界に整列（24.3時はグリフバウンドに整列）」という機能が実装され、これがとてもかゆいところに手が届く良アプデでした。 知らない方も多くもったいないのでご紹介します。 イラレあるある：文字をオブジェクトの上下中央に配置できない Illustratorを使用していると「整列」ツールを使ってオブジェクト内に文
2023.3.13
エンジニアの新卒研修を受けた学びと感想
今回はラクーンの新卒研修を受けた学びと感想について書きたいと思います。 新卒研修が作られた背景や研修のゴールなどは以下の記事をご覧ください。 ゼロから始める新人エンジニア研修 入社のきっかけ ラクーンへの入社を決断した1番の理由は、人が良かったからです。 ラクーンを知ったきっかけはエンジニア限定の逆求人イベントでした。 スライドを使って自己紹介し、お笑い鑑賞が趣味でおすすめのお笑い芸人さん
目標設定にもアジャイル思想を！複数の目標に対する向き合いかた
皆さんの会社では「目標設定」がありますか？また、それにどの様に取り組んでいますか？評価に係わるから頑張ろうと思う人もいれば、毎年目標設定を憂鬱に感じる人もいるのではないでしょうか。 今回は、会社の目標そのものを分解しつつ、会社の目標や自身の目標にどの様に取り組んでいけば良いのかを考えてみたいと思います。 会社でよくある目標設定 デファクトスタンダードなMBO さて、企業の目標設定というと、M
2022.10.27
タグマネージャのカスタムHTMLで外部JS読み込んだ場合の実行順番を調べてみた
Webエンジニアをやっていると Google Tag Manager に触れる機会ってありませんか？ マーケティング部門から広告タグの相談を受けた り、 タグマネージャから出る謎のJSエラーの調査 を依頼されたりと、今やWebシステムの構成要素としてなくてはならないものとなっています。 一方でエンジニアの管理を離れて自由奔放に運用されたタグマネージャは伏魔殿の様相を呈してくるので、できればお近づ
作図の手間から開放する、ダイナミックER図の試作してみた
同僚と雑談でER図について話してました。 新しいメンバーを迎えるときにはER図があると便利だけど、100テーブルを超えたあたりから線が絡まりすぎて無理だよねー おそらく業務システム開発にかかわる人なら誰しもが似たような経験があるのではないでしょうか。 次のようなことができたらいいなあと、DDLからER図を生成するSPAを試作してみました。 DDLから動的にER図を作図してほしい
2022.8.2