CSSだけでできる！画像のスタイリング
サイトをつくるときに、「大量の画像を加工するのが大変だな」と思うことはありませんか？ 画像を加工して使用する場合、もし修正が必要になるとすべての写真を修整しなくてはなりません。 その点、CSSを使用していると、それぞれの画像を修正しなくてもCSSを修正すればすべての画像に反映してくれます。 そんなわけで、今回はcssでできる画像のスタイリングをいくつかご紹介します。 目次 シャドウ
2022.3.30
デザイン
Chromeでの画像ぼやけ対策色々
先日出来上がったページの画像がぼやけてると指摘されて修正することがあったのですが、その際調べたところ解決法が複数あったので、体験談交えてメモ的に記録しておきます。 事象と経緯 自分のPCでは特に気になっておらず、完成してからデザインチェックに出したらChromeだけ画像が荒いんですが、と指摘が上がりました。 ブラウザごとの見え方のサンプルも添えてご指摘いただいたのですが、これが結構ひどく、1p
2022.3.29
JS不要！CSSで固定要素のアレを簡単に実装【position sticky】
さて、昨今IEのサポートが切れた関係で、IEをカバーをする必要が無くなってきています。 弊社でも一部以外、IEはサポート対象外としています。 IEを考えると新しめの技術を使えなかったのですが、縛りが解禁されてだいぶ経ちますね。 そんな背景を踏まえ、今回はcssのposition stickyについてご紹介しようと思います。 固定要素のあれこれをstickyで解決 皆さま、画面上で固定要素は使
2022.3.24
デザイナーも知っておこう「相手が行動するプレゼン資料」
私たちデザイナーは、他の部署メンバーが作り上げたプレゼン資料のデザイン添削を行う機会がときどきあります。 作業内容としては、まず見やすい状態にするためにデザインルールを作ります。あとは決めたルール通りに実際にレイアウトを行います。つまり、見た目を綺麗にするだけの作業に留まっています。インハウスデザイナーならば、もう一歩踏み込んでプレゼンの目的や結果を意識したデザイン業務を心掛けたいですよね。…とい
2022.3.24
完成後も編集できる！ネオンサインの作成方法【Illustrator】
最近作成したネオンサインオブジェクトが編集できて便利だったので、作成方法をご紹介します。 今回作成するネオンサインの特長です。 Adobe Illustrator のみで作成できる（＝ Adobe Photoshopや他ツールを使用しない） テキストの色・フォント・線幅などを完成後も編集できる グラフィックスタイルに登録できる それでは作成方法を見ていきましょう。 1. 白地素材を用意
2022.2.28
「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