Photoshopの作業中、急に画像の色がくすんだ時に行う3つの対処法
Photoshopで作業中に、急に画像の色が変になって困ったことはありませんか？ ↑Photoshopに画像を配置後、赤丸で囲んだ部分の色味がくすんで、部分的に灰色で飛んでしまいました。 画像の色が変になったらやってみよう。対処法3選 ▼【方法1】Ctrl+Y（色の構成）を解除してみる ▼【方法2】trl+Shift+Y（色域外警告）を解除してみる ▼【方法3】プロファイル変換＞RG
デザイン
フェードイン・アウトのスライドメニューをCSSアニメーションで簡単に実装！
今回は弊社サイトにて実装したCSSアニメーションをご紹介しようと思います。 少々前にサービスサイト「URIHO」のリニューアルを行い、私はマークアップエンジニアとして携わりました。 さて、本稿ではスマホ・タブレットのヘッダの動きに関して取り上げようと思います。 見てもらいますとメニューをクリックした後に左から右へスライドし、中のリンク達がずらら～っと表示されます。 実はこれ全てCSSのみで
2019.10.31
エンジニア出身者がデザイナーの業務と出会って得た５つのこと
今回は元々はエンジニア出身者の私が、デザイナー部署のマネジメントをするようになったことで得たことをまとめてみたいと思います。 私は元々は運用周りなどを好んで担当するエンジニアをしていましたが、ここ最近のキャリアでは開発チームのマネージャ、いわゆるVPoE的な役割を担当してきました。ところがちょっとした大人の事情から２年程前よりデザインチームのマネジメントも担うことになりました。私はデザインという
SVGにCSSやJSを組み込んでローディングアニメーションを作成する！
今回のネタは「SVG」です！ 皆さん、SVG使ってますか？？ SVG形式の画像って、拡大しても荒くならないとか、ロゴとかによく使われているとか、そういったイメージを持っている方が多いかもしれません。 良く使われているjpgやpngなどの画像形式との比較を簡単にまとめるとこんな感じになります。 特徴 SVG（ベクター画像） jpgやpng（ラスター画像） 長所
2019.9.30
彼女との食事をUX的に考えると面白い、という話
今回はUXを身近に感じられるエピソードをご紹介したいと思います。 話のポイント UX（User Experience）はユーザー体験の意 ユーザーがサービスやプロダクトに接しているときの体験全体を総称する言葉 サービスやプロダクトのUXを考えることの重要性は高まっているが、難しいと思われがち でもそのユーザーを家族、友人、恋人など身近な人に置き換えて考えると分かりやすい、という話です 例
2019.9.27
『Psycology For Designers』の要点
デザインやUXを学んでいる過程で、Joe Leech著の「Psycology For Designers」という本のことを知る機会があったのですが、日本語訳が無かったので自分で使うための翻訳を試みてみました。ここではその要旨を紹介してみます。 ざっくりしたまとめ 心理学（やそれに類する学問）はUXやデザインに大きな効果を与える。正しく使おう デザイナーは心理学を学ぶことでユーザーにデザインが
2ステップで平面図を立体に！Illustratorで超簡単に立体的なイラストを作る方法
Webデザイナーですが、たまにイラストを描いたりします。 少し前にラクーンが運営する越境ECサイト「SD export」3周年を記念するインフォグラフィックを作成しました。 このイラストは「Isometric（アイソメトリック）」と言われる技法で、Illustratorを使って作成しています。 アイソメトリックとは交差した三軸が同じ角度で交わる立体的な俯瞰図のことです。 この中で使われて
2019.8.28
HTMLをCSSにあわせるな！クラス無しCSSフレームワーク tacit
開発チームの下田です。 HTMLで簡単な画面を作るとき、困りますよねデザイン。 HTMLもJSも書けて、そのうえデザインしながらCSSも書けます！という超人なら良いんですが、私はそうではないのでCSSフレームワークを利用しています。 (さらに…)
仕事内容のご紹介 ～デザイン制作部編
11月に新設されましたデザイン制作部(旧:技術戦略部 WEBマスターチーム)のみながわです。 これまでTECH BLOGでは、技術戦略部のメンバーがエンジニアならではの情報を発信してきましたが、今回はテクニカルな内容から少し離れ、デザイン制作部の仕事内容を紹介させていただきます。 ◆デザイン制作部とは？ 目的に応じて、何を、どこに、どのように配置するべきかを考え、ページデザインと