非デザイナーの僕が「デザインぽい」ことをする時に使う便利ツール17個｜苦しんでプログラミングを学んだ柴犬（くるしば）
※こちらの記事がはてブの総合人気エントリに入りました！ こんにちは。くるしばです。 元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。 その後個人で開発したサービスを売却したり、また別のIT系の会社を創業したりしています。 去年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに8000人の方々にフォローして頂きました。 プログラミング初心者に絶対覚えてほしい、ググる時の効率が10倍上がるコツ pic.twitter.com/hK1ZhNavwh — 苦しんでプログラミングを学んだ柴犬（くるしば） (@shiba_program) September 13, 2022 僕は普段はいわゆるPMやエンジニアとして仕事をすることが多いのですが、業務でも個人プロジェクトを作っている時でも 「最低限の見栄え
レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単！ min(), max(), clamp() の便利な使い方を詳しく解説
CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシンプルなCSSで実装できます。 最近のWebサイトで使用されている、CSSの比較関数 min(), max(), clamp() の便利な使い方を紹介します。 Use cases for CSS comparison functions by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 比較関数の使用例: 流動的なサイジングとポジショニング 比較関数の使用例: 装飾要素 比較関数の使用例: 流体ヒーローの高さ 比較関数の使用例: ローディングのバー 比較関数の使用例: コンテンツの区切り線 比
かおりゅ on Twitter: "とんでもないサイトを知ってしまった。絵描きやデザイナー大歓喜のカラーチャート『Colorbase』https://t.co/CLWprkukt6 色を選ぶと、その色の補色・類似色・同じ明るさを持つ色・白と合わせた時の見やすさ・色相… https://t.co/rOgsnechfT"
とんでもないサイトを知ってしまった。絵描きやデザイナー大歓喜のカラーチャート『Colorbase』https://t.co/CLWprkukt6 色を選ぶと、その色の補色・類似色・同じ明るさを持つ色・白と合わせた時の見やすさ・色相… https://t.co/rOgsnechfT
図で理解する Flexbox
Flexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧で毎回調べていた。 仕組み・使い方を理解しようと思い、図を使って整理してみた。 ※ CSS Grid についても整理してみました Flexbox Flexboxは縦・横に要素を並べられるレイアウト方法です。 Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央寄せ・上寄せなど細かな位置も調整できます。 コンテナ・アイテム Flexboxを使う上で必要となる要素が「Flexコンテナ」と「Flexアイテム」です。 Flexコンテナの中にFlexアイテムを複数並べてレイアウトします。 <div class="container"> <div class="item">１</div> <div class="item">２</div> <div class="item"
UIデザイン時にやってしまいがちな18の誤ち｜Mikio Kiura / ANKR DESIGN
WebデベロッパーのVictor氏による下記のツイートから始まるスレッドが大変参考になる内容だと感じたので、ご本人に許諾を得て日本語で紹介させていただくことにしました。 I reviewed 100+ user interfaces this year. Avoid the most common 18 mistakes to make your UI/UX design better 👇 — Victor (@vponamariov) July 30, 2021 私は今年100以上のユーザーインターフェースをレビューしました。あなたのUI/UXデザインをより良くするための、下記に示す18個の良くある誤ちを回避しましょう。本記事で使用する画像はすべてVictor氏のツイートから拝借しています。なお翻訳には一部私の意訳が入っていることをご了承ください。 1. 薄いコントラストの文字適切では
トランプ on Twitter: "やばいな〜。IBMがこの度公開した和文のゴシック体フォント「IBM Plex Sans JP」、完全にオープンソースなんだけど、独特のスミ取り処理とかでツブレにくく、これまでになかった表情があってオシャレ。 完成度高くておすすめで… https://t.co/oRhFNB9kjk"
やばいな〜。IBMがこの度公開した和文のゴシック体フォント「IBM Plex Sans JP」、完全にオープンソースなんだけど、独特のスミ取り処理とかでツブレにくく、これまでになかった表情があってオシャレ。 完成度高くておすすめで… https://t.co/oRhFNB9kjk
[こかげ] フォント : Nu みちしるべ
概要 「Nu みちしるべ」は、日本の道路標識に基づいて作ったフォントです。標識の数字に興味を持ったのが切っ掛けで作りましたが、数字だけだとフォントとしてあまり面白くないので、周りの赤い円を含めて自動的に組み立てられるように作り込んでみました。道路標識の全種に対応しているわけではないです。用途は…何かあるでしょうか。 標識を自動的に組み立てるには、アプリケーションが OpenType‐フォントの高度な機能に対応している必要があります。非対応のアプリしか持っていない場合、手動で画像編集をして部品を組み立てる事になりますが、その部品としてフォントを利用できます。 ウエブブラウザーも今のところ対応状況が微妙なので、次の見本は崩れて表示されてしまうかも知れません。「直接編集」や「自動着色」を切り替えてみると表示が改善する場合があるようです。（なお「直接編集」を無効にした場合、文字列の書き替えは左上の
【図解入門】シンプルな図の作り方｜櫻田潤🎨インフォグラフィック・エディター｜note
3年前に、図解の基本をまとめた本『図で考える。シンプルになる。』を書きました。その内容から、エッセンスを抽出したのが本noteになります。 （１）「幕の内図解」と「イチオシ図解」 図には、大きく分けて、2つのアプローチがあります。 ひとつは、幕の内弁当のように、いろんな要素を盛り込んだ図で、もうひとつが、唐揚げ弁当のように、イチオシのおかずにフォーカスした図です。 たとえば、桃太郎の話を「幕の内図解」のアプローチでまとめてみたのが、つぎの図です。 登場人物とエピソードをフラットに扱って、網羅的に盛り込んでいます。 この図を使って、人に説明しようとすると、「まず、お婆さんですが……」「つづいて、お爺さんですが……」といった具合に、「お婆さん」「お爺さん」「桃太郎」それぞれの視点に切り替えが必要になり、話す方も話しづらければ、聞く方もまどろっこしく感じてしまいます。 相手がじっくり聞く耳を持っ
デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント｜Tomoyuki Arasuna
webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は
【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ
↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x
![【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c569bf6868b0e2cd70822921c201208292c30537/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20190528%2F20190528165147.png)
これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
「フォント＝プロデザイナー向けという概念を覆したい」 商用フォントが1書体100円ほどで使える「mojimo」はなぜ生まれたか
同人作家向けのフォント36書体が年間3600円で使える「mojimo-manga」に、インディーズゲーム制作で12書体が年間4800円で利用できる「mojimo-game」――。本格的なフォントをお手頃な価格で使えるとして注目を集めるサービス「mojimo（モジモ）」シリーズが、フォントワークスより登場してから1年が経過しました。 「mojimo-manga」 通常、公式メーカーが出している商用フォントというのはプロデザイナー向けがほとんどで、初心者には手が出しづらい印象があります。 特に大きいのは値段。フォントの一般的な相場は、平仮名と片仮名、漢字をしっかり含んだもので1書体2万5000円ほど。年額制のフォントサービスも、フォントワークスが出している「LETS」はおよそ6000書体で3万6000円、モリサワの「MORISAWA PASSPORT」は全1000書体以上で4万9800円と、「
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
新卒デザイナーのデザインブラッシュアップ方法 | remark
デザイン事務所にてアートディレクターとして企業ブランディングを中心に広告、商品企画、プロダクト開発、Webプロモーションなどに従事。自分たちの働き方もデザインの一部と捉え、自らのほしい未来をつくるために2015年9月ツクルバに参画。Web、グラフィックなどツクルバに関わるデザイン業務を担当。[柴田のインタビュー記事](https://studios.tsukuruba.com/remark/1524649191951) まずは自由に作ってもらう 円香：バナーできたので見ていただいてもよいですか〜。 柴田：これ、CLASKA（イベントの会場）ってのがビジュアルから伝わってこないのだけど、素材これしかないの？ 円香：これしかないんす…公式のビジュアルがこれで 柴田：ならしょうがないな…全然わからん。CLASKA側からこれ使ってくれって？ 円香：絶対これってわけでないとは思いますが、送られてきた
無料ダウンロード可能で商用利用もOKな内容が異様に細かいピクトグラム「human pictogram 2.0」
資料や配布物のデザインは悩みどころですが、「早く帰りたい人は利用してさくっと仕事を終えて帰宅しましょう」ということで、「フキダシデザイン」の作者であるTopeconHeroesのダーヤマさんが無料で商用利用も可能なピクトグラムを公開しています。「ピクトグラムはほとんどの場合、公共交通機関や、バリアフリーなどの標識に使われるため、雰囲気が真面目なものが多く、やや面白みに欠けるので、くだらないポーズなど多めにバリエーションを増やしていく事にしました」とのことで、ピンポイントすぎるピクトグラムの内容は、見ているだけでも楽しめます。 human pictogram 2.0 (無料人物 ピクトグラム素材 2.0) http://pictogram2.com/ トップページにはカテゴリ分けされていないピクトグラムがずらっと表示されており、ページ下部のボタンから「どんなピクトグラムがあるのか？」というこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する
商用利用無料、UIデザイン用のSVGアイコンが558種類！デザインに合わせたカスタマイズも簡単な優れもの
ヨッピー on Twitter: "昔、楽天のえらい人に「楽天の通販ページはなんであんなにゴチャゴチャしてんの？」って聞いたら「ABテストを死ぬほど繰り返しても、結局ああいうスタイルの売上が一番高い」って言われたの思い出すな。 もちろん、そういうページを好きな人が楽… https://t.co/c4lxBgtSHS"
デザインが苦手な人へ。デザインの四大原則を押さえれば格段にクオリティ上がるよ→素人が作るチラシや仕様書などにも有益
デザインに便利なツール18選｜かずたか
