nth系おぼえがき
nth系はいざ使うときに「あれ？なんだっけ？」と思うこともあるのでメモとして残します。 目次 :nth-child(★★) 奇数、偶数 ★n：★の倍数 n+★：★番目以降 ★n+●：★の倍数＋● :nth-last-child：最後から数えて その他 :first-child、:last-child :first-child（最初だけ） :last-child（最後だけ） :
2022.1.12
デザイン
Illustratorの選択ツールの違いを理解して作業効率をアップさせよう！
Illustratorで作業したことがある人は一度は見たことがあるこの白や黒の矢印たち。 「どういうときに使い分けたらいいかわからない！特に白くて＋が付いてる矢印の使いどころってどこ！」となることありませんか。 今回はそれぞれの矢印の特徴と、白くて＋が付いてる矢印はこういうときにこう使うと便利だよといったポイントをまとめたいと思います。 選択ツール 黒矢印は「選択ツール」です。（ショートカ
2021.12.24
jpg・pngのフリー素材や手書きのイラストをIllustratorでパス化する方法
デザイン作業をしているときにフリー素材を利用したり、自分で素材用のイラストを書いたりすることがあると思います。 その時に「このフリー素材、jpgやpngしかデータが無いけどaiデータが欲しい！」「自分で描いたイラストをパス化したい！」と思うことはありませんか？ そんな時に使えるIllustratorでのパス化の方法をご紹介します。 jpgやpng画像をパス化する方法 画像を用意します。 フリー
2021.4.30
初めてのUXリサーチをフルリモートで実施した話（前編）
このエントリーでは、未経験の方向けにUXリサーチのはじめの一歩を共有します。 自分なりの問題意識からUXを勉強し始め、いざ実行にうつそう！と思った時 どう始めて進行していけばいいのか、実践のイメージが出来ていませんでした。 他社の取り組みからヒントを得ようと、Webの記事を読んだりセミナーに参加してみたのですが、 自分が知りたいような具体的な事例はなかなか見つからず・・。 そこで、自分が初めて実
2021.4.22
ドラえもんのアイテムに学ぶ、バナーデザインの幅を広げる考え方
WEBデザインにおいてバナーデザインは欠かせない仕事の１つです。 ラクーンでも新卒デザイナーには入社数カ月間は集中的にバナーを作ってもらいます。 バナーデザインは情報整理に始まり、画像加工・配色・フォントの選定・レイアウト・枠内のバランス調整などデザインの基礎が詰め込まれています。 WEBデザインの初歩でありながら難易度が高く奥深い制作作業なんですね... そのため部内のメンバーから「ページより
2021.4.20
デザイナーがプロジェクトで体験したこと
私はデザイナーとしてプロジェクトにアサインすることがあります。 今回は、その時に体験した事柄と行った対応を備忘録的にあげていってみようと思います。 きっと同じような体験をしている方もいるのでは…？ プロジェクト中に起きた、こんなこと。 ①完成間近の機能がひっくり返る 依頼者と上長との間で認識の齟齬があることが判明。 やっと固まりかけた機能を、ヒアリングからやり直す…? ②工数が想定の倍？！
2021.4.8
フォントサイズを可変にしてみよう！css関数clampの便利なお話
googleがモバイルフレンドリーを提唱してからもはやレスポンシブ対応は必須になりましたが、レスポンシブ対応って悩ましいですよね。 各デバイスの代表的な端末の解像度に合わせて作ればよいのですが、ウィンドウ幅を縮めてテストを繰り返していると微妙な幅の時にレイアウトが崩れているのが気になってしょうがない、なんてことザラにあります。 width、height、font-size、padding、marg
2021.4.1
デザインの質を上げるコツ！ ～文字詰め編～
「わーい！デザインが完成した！！……うーん、でもなんだか散漫な印象。 どこかツメが甘い感じもする…」 そんな時はありませんか？ そのモヤモヤの原因は細部の調整不足かも。 美しさは細部に宿ります。ちょっとした調整でデザインの質がぐんと上がるかもしれません。 デザインの基本！ 文字詰めをチェック まずは以下をご覧ください。 一見、普通の名刺ですが、よーく見てください。 どこか気になるところは
2020.5.1
インハウスデザイナーがやっている要件整理法
突然ですが、デザイナーの先輩や上司にこんなことを言われたことはないでしょうか。 ”指示された通りに作る作業者になっちゃだめだよ” ”要望をちゃんと汲み取らなくちゃ” 納得はできるけど、具体的にどうしたらいいか分からないという方もいるのではと思います。 以前、部内の勉強会でも「事業部の要望に対してこの改修案で本当にいいのか悩む」「意見が分かれた時どう判断したらいいか難しい」という声があがったこと
2020.4.23
超簡単！超軽量！LottieでWebアニメーションが捗る
今回ご紹介するのはWebアニメーションライブラリ「Lottie」です。 リッチなUXを実装したいけど、以下のようになかなか手が出せない方もいらっしゃるのではないでしょうか？ デザイナーにはJavaScriptの学習コストが高い エンジニアにはデザイナーの求めるような動作をなかなか表現できない デザイナーとエンジニアの得意分野を切り分けるために動画で表現しようとするとどうしても重くなる しか
2019.12.5
Photoshopの作業中、急に画像の色がくすんだ時に行う3つの対処法
Photoshopで作業中に、急に画像の色が変になって困ったことはありませんか？ ↑Photoshopに画像を配置後、赤丸で囲んだ部分の色味がくすんで、部分的に灰色で飛んでしまいました。 画像の色が変になったらやってみよう。対処法3選 ▼【方法1】Ctrl+Y（色の構成）を解除してみる ▼【方法2】trl+Shift+Y（色域外警告）を解除してみる ▼【方法3】プロファイル変換＞RG
フェードイン・アウトのスライドメニューをCSSアニメーションで簡単に実装！
今回は弊社サイトにて実装したCSSアニメーションをご紹介しようと思います。 少々前にサービスサイト「URIHO」のリニューアルを行い、私はマークアップエンジニアとして携わりました。 さて、本稿ではスマホ・タブレットのヘッダの動きに関して取り上げようと思います。 見てもらいますとメニューをクリックした後に左から右へスライドし、中のリンク達がずらら～っと表示されます。 実はこれ全てCSSのみで
2019.10.31