「BudouX」を使ってテキストの折り返しを自動化しよう！
GoogleのGithubリポジトリに日本語テキストの自動改行マークアップ支援ライブラリ「BudouX」が公開されました。 日本語は言語的な特徴として明確な文字区切りが存在しないため、一般的なブラウザはテキストの折り返しを最適化できていません。 BudouXはそんな問題に対し機械学習によって日本語の文章に自然な改行位置を自動挿入してくれます。 BudouX - github オフィシャルのサ
デザイン
視覚調整でユーザーの「違和感」を解消しよう！
見る側にストレスを与えず心地の良いデザインを提供するために、違和感のない配置や色使いはデザインをするうえで非常に重要なポイントです。 ほとんどのデザインツールには要素を均等に配置する整列の機能が備わっていますが、均等に配置したデザインのはずなのに人間の目で見るとしっくりこない場合があります。そんな時に大切なのが視覚調整です。 では視覚調整とはどのようなものなのでしょうか。 視覚調整とは？ 数値
2022.1.14
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