kuroco

「社員のやりたいを実現する」株式会社クロコ IT事業部のクリエイティブに関するアウトプ…

kuroco

「社員のやりたいを実現する」株式会社クロコ IT事業部のクリエイティブに関するアウトプット・ノウハウを発信していきます。 https://kuroco.jp/

最近の記事

自己紹介用にAR名刺を作ってみた。

株式会社 クロコ デザイナーのカメザワです🐢 先日会社の全体会議が行われ、普段フルリモート勤務で初めましての方が多く、周りの人(他事業部の人)と自己紹介タイムがあるとウワサを聞いて、 会話のタネに名刺を作ることにしました。 ただ、名刺を作っても面白くないので、少し前のAdobeMAXでみたARを使った名刺にしようと思いました! 当初、Adobe Aeroを使ってARを作ろうとしていましたが、、、 【Aeroのデメリット】 ❌ AR閲覧者もスマホにAdobe Aeroのアプ

    • おすすめの画像圧縮ソフト

      こんにちは!クロコ IT事業部 デザイナーのフシミです。 今回はWeb制作で画像をできるだけ劣化させずに圧縮したい! そんなときに便利な無料の圧縮ソフトをご紹介したいと思います。 *** 1. ImageOptim Macで使えます!jpeg, png, gifのファイル形式に対応。ドラッグ&ドロップの簡単操作のみで使えるので、ささっと圧縮したいときに便利です。 2. iMage Tools Macで使えます!JPG・PNG・BMP・TIFFに対応。こちらはドラッグ

      • CUD-カラーユニバーサルデザインへの配慮と便利な確認ツール

        CUD-カラーユニバーサルデザインとは? カラーユニバーサルデザインは多様な人たちが利用するサービス、商品、建物、設備などのデザインを誰に対しても分かりやすく情報が伝わるように、デザインの色を機能させ、配慮することです。 様々な特性を持った人が見分られるような配色を選ぶこと 色が見分けにくい人にも情報が伝わるようにすること 色覚障害(色弱)とは?ものを見る機能のうち色覚(色を区別する)能力に障害があることにより、一般的に捉えられる色彩を感じ取ることが困難な状態を指しま

        • CTA(行動喚起)のワーディングの良い例と悪い例

          こんにちは!株式会社 クロコ デザイナーの山本です。 今日はWEBサイトに重要なCTAを工夫することで、より高いコンバージョン率が狙えるよう効果的なCTAについてまとめてみました! CTAを分かりやすくするこのボタンを押下することで何が起きるんだ、、、。 というような不明瞭なCTAはユーザーの心に不安を与えてしまい、サイトの離脱に繋がってしまいます。 そんな不安がなくなるように、遷移先で直観的に何が起きるのかがイメージできるワーディングが重要になります。 CTAは統一

        自己紹介用にAR名刺を作ってみた。

        • おすすめの画像圧縮ソフト

        • CUD-カラーユニバーサルデザインへの配慮と便利な確認ツール

        • CTA(行動喚起)のワーディングの良い例と悪い例

          Apple pencilでデザインの幅を広げてみる。

          こんにちは。株式会社クロコ・IT開発事業部のデザイナー、スズキチハルです。 最近、 ・Apple pencil(第二世代) ・ipad pro 12.9インチ(第五世代) を購入したので、これを機に、これらを使用してどのようにデザインの表現の幅を広げられるか考えてみたいと思います! アイコンやイラストを素材頼りでなく自分で作れる 特に人物素材など、画風を一貫しないといけない時に困るのが、「こういうポーズのイラストが欲しい・・・けど見つからない・・・」場合。 しか

          Apple pencilでデザインの幅を広げてみる。

          HTML&CSSを理解してWEBデザイナーになりたい デザイナー見習いが先輩に聞いた方法

          こんにちは!株式会社クロコのデザイナー見習いのナガイです。 今回のタイトルの経緯 半年前からデザイン業務に携わっていますが、 この度WEBデザインにも興味を持ち始めました。 こんなホームページ作ってみたい…! 作れる先輩方、かっこいい!! そうなりたいなと思うようになりました。 スクールに通うには費用が高い…ということで 独学とたまーに先輩方に見ていただく方法で いきたいと思います。 先輩が実際に行っていた勉強方法 □Progate https://prog-8.c

          HTML&CSSを理解してWEBデザイナーになりたい デザイナー見習いが先輩に聞いた方法

          異業種からWebデザイナーに転職してから、実務に生かせるコーディングの本4選

          クロコ IT事業部 Webデザイナーのエイダです。 私はもともと美容師、エステティシャンをしていて、デザインとは無縁の業界からの転職でした。 ー コーディングはできるけど、構造に自信がない。 ー デザインは得意だけどコーディングは苦手意識がある。 ー 見た目だけでなくコードも綺麗に書けるようになりたい。 といった方へ、私が読んでよかった実務に生かせるコーデディングに関する書籍を4つご紹介します。 {1} HTML5&CSS3デザイン 現場の新標準ガイド 本書

          異業種からWebデザイナーに転職してから、実務に生かせるコーディングの本4選

          幅の変更で表示が消失!「メディアクエリの落とし穴」

          こんにちは!WEBデザイナー山本です。 最近、WEBサイトのレスポンシブデザイン制作途中で 「一定の幅だけデザインが全く適用されない状態」という 非常に嫌~な現象に遭いました。 なんとか無事に解決することができたので、改善策を記録しようと思います。悩んでいる方の参考になったらと思います! あるウインドウ幅でだけなぜかデザインが消失? まず、どんな状態で発生したのかというと、以下のような時でした。 ①ブラウザの表示倍率を上げる ブラウザの表示倍率を110%、150%などに

          幅の変更で表示が消失!「メディアクエリの落とし穴」

          Adobe Animateのトゥイーンを使ってイラストを動かす練習

          こんにちは!クロコ IT事業部 デザイナーのフシミです。 自分の描いたイラストを動かしてみたいな〜と思い、Adobe Animateを使用してみることにしました。 *** ★ アニメーションの種類 Adobe Animateには、「トゥイーン」という3つのアニメーションの動きがあるようです。 1. クラシックトゥイーン キーフレーム間での編集はできませんが、シンプルな動き(直線的な動き)は簡単でした。「クラシックモーションガイド」というレイヤーを設定すると曲線的に動

          Adobe Animateのトゥイーンを使ってイラストを動かす練習

          デザイナーが学んだ色についてのまとめ

          こんにちは。デザイナーのmiyaです。 突然ですが、みなさんは、デザインでの色の決め方で気をつけていることはありますか? 色についてこれまで自分のやってきた経験での学びをまとめたいと思います。 70:25:5の法則 ご存知の方も多い「70:25:5の法則」です。 これは、ベースカラー70%:メインカラー25%:アクセントカラー5%のことで、色々なデザインを見ていくと、この法則で作られているものがとても多いです。 基本的にこの法則に当てはめられるように、3色までにするとデザイ

          デザイナーが学んだ色についてのまとめ

          UIを組む際に不足しがちな「最大と最小」の表現

          最近やっっっと鈴木リーダーの下の名前呼びに慣れてきたクロコ Webデザイナーの窪薗(クボゾノ)です☺︎ この1年間でUIデザイン作成の案件に入ることが多かったのですが、「あの要素足りないね」「このボタン必要だね」と途中で気付くことが多く。。 今回はそんな見落としを少しでも減らすべく、UIを組む際に不足しがちな要素のひとつである「最大と最小」の表現を自分のためのアウトプットとしてまとめてみました。 これで「あれ実装していなかったドウシヨウマニアワナイ。」がなくなるといいな

          UIを組む際に不足しがちな「最大と最小」の表現

          使ってみたいフリーイラスト素材3選(番外編あり)

          こんにちは!クロコ IT事業部 Webデザイナーの佐藤です。 今回はデザインする上で欠かせない『イラスト』をフリーダウンロードできるサイトをご紹介したいと思います。 会社で契約しており業務で使用しているイラストサイトはイラストAC  ですが、無料でも良質なイラストを提供しているサイトはたくさんあります。 今回はその中で使ってみたいと思ったイラストサイトを3つご紹介します! 1、Sui-Sai 水彩画のイラスト素材サイトです。 とても透明感があり、女性が好きそうなデザ

          使ってみたいフリーイラスト素材3選(番外編あり)

          AfterEffects初心者がLottieを使ってサイトにアニメーションを表示するまで

          株式会社 クロコ デザイナーのカメザワです🐢 先月、社内の動画事業部の方にAftter Effectsの使い方研修を開いてもらいました🎬 以前独学で少し学んだ事はありましたが、Web制作でも使えるので改めて学ぼうと思っています。 その中で、最近注目されているのLottieを使ってAftter Effectsで作ったモーションロゴをWebアニメーションしてみたので、そのレポートです! 出来上がりはこんな感じです👇 サンプルを見る LottieとはLottieを利用すれば、

          AfterEffects初心者がLottieを使ってサイトにアニメーションを表示するまで

          異業種からWebデザイナーに転職するときに、読んでよかったコーディングの本4選

          クロコ IT事業部 Webデザイナーのエイダです。 私はもともと美容師、エステティシャンをしていて、デザインとは無縁の業界からの転職でした。 ー 別分野の仕事だけど、Webデザイナーに転職したい。 ー デザインもコーディングもできるデザイナーになりたい。 ー コーディングって?最初にどれを読めば良いかわからない。 といった方へ、私が初学時の取っかかりで読んでよかったコーデディングに関する書籍を4つご紹介します。 {1} 世界一わかりやすい HTML5&CSS3コ

          異業種からWebデザイナーに転職するときに、読んでよかったコーディングの本4選

          プロのデザイナー10人にマウス事情を聞いてみた

          こんにちは! 株式会社クロコ・IT事業部のwebデザイナー、スズキチハルです! デザイナーを志す皆さん、或いは駆け出しの皆さん、こんなことを思ったことはありませんか? 「プロのデザイナーって、マウスにもこだわったほうがいいの?」 私もかつてそんなことを考え、Google先生に聞いてみたことがあります。 ググっていく中で、とあるデザイナーがマウスについて語っているブログ記事に辿り着きました。 そこでめちゃくちゃカッコいい言葉を見つけたんです。 「デザイナーにとっての

          プロのデザイナー10人にマウス事情を聞いてみた

          入力フォームUIまとめ ✅ 18項目

          株式会社 クロコ デザイナーのカメザワです🐢 入力フォームを組む際の備忘録として。 今まで、デザイン制作時、他サイトを参考にしつつも何となくで作ってしまっていたと反省しつつ、自分用にまとめてみました。 (基本的な場合であり、例外もあります。) どんなに他のコンテンツを作り込んで、 会員登録や購入を検討しているユーザーをフォームまで誘導できても、 フォームの不備で離脱させるのはもったいない。 ユーザーのコンタクトポイントである入力フォームは重要! 入力フォームが必要とされ

          入力フォームUIまとめ ✅ 18項目