デザインのムラゴンブログ

無題 B 51

F6

Chakra UIとは

React向けのモダンなUIコンポーネントライブラリ。 一言でいうと、「デザインが苦手でも“それっぽい綺麗なUI”がすぐ作れる便利セット」。 1. Chakra UIが生まれた理由 ReactでUIを組むとき、ボタン・入力フォーム・モーダル…など全部を自前でデザインしようとすると、地味にしんどい。 ... 続きをみる

無題 B 50

F6

ReactでCSSを当てる方法

React で開発をしていると、必ず「スタイルをどう管理するか」という問題にぶつかります。HTML＋CSS の世界とは違い、React には複数の書き方があり、それぞれメリット・デメリットがあります。この記事では、現場でもよく使われる主要なスタイリング方法をわかりやすく整理して紹介します。 1. 通... 続きをみる

無題 B 49

F6

無題 B 48

F6

無題 B 47

F6

無題 B 46

F6

無題 B 45

F6

無題 B 44

F6

コラージュ

それがデザイン もしくはツギハギ あるいはオシャレ？ いやでもダサイ？ ドコかに在りそうで ドコにも無さそうな 誰が為のモノでもなく 自分の為に選べ

無題 B 43

F6

無題 B 42

F6

無題 B 41

F6

無題 B 40

F6

無題 B 39

F6

無題 B 38

F6

〈新作完成〉今度は手描き！ピックアップいただくぞ！

Los geht's! (ロス ゲーツ) さあ、行こう！ 相変わらずSUZURIさんからのピックアップ（SUZURIさんの推しアイテム）は 全くいただけてないですが、めげずに新作つくりましたよ 今回は、直筆の筆での手描きをテーマにしました 小さい頃から習字が好きだったので 手描きで、なにかできないか... 続きをみる

ヘッドレスCMSとは？

近年、Webサイトやアプリの開発でよく耳にするようになった「ヘッドレスCMS（ヘッドレス・コンテンツ・マネジメント・システム）」という言葉。 従来のCMS（コンテンツ管理システム）と何が違うのか、どんなメリットがあるのかをわかりやすく解説します。 そもそもCMSとは？ CMSとは「Contents ... 続きをみる

無題 B 37

F6

タイポグラフィとは

タイポグラフィ（Typography）とは、文字のデザインや配置、組み方を工夫して、視覚的に美しく、読みやすく、そして印象的に伝えるための技術や考え方のことです。 単に「フォントを選ぶ」だけではなく、文字サイズ・行間・字間・レイアウト・バランスなど、文字を通じて情報や感情をどのように伝えるかを設計す... 続きをみる

無題 B 36

F6

無題 B 34

F6

無題 B 33

F6

無題 B 32

F6

Webサイト制作でよく聞く「グリッド」とは？

Webデザインの世界でよく耳にする「グリッド」という言葉。 なんとなく「整列するための仕組み」と思っている方も多いかもしれませんが、実はデザインの見やすさ・使いやすさ・統一感を生み出す上で欠かせない重要な考え方です。 この記事では、初心者にもわかりやすく「グリッド」の意味や役割を解説します。 グリッ... 続きをみる

LPはパソコンサイズも作った方がいい？

結論から言うと、LP（ランディングページ）はスマホサイズだけでなく、パソコンサイズも作った方がいいです。理由はいくつかありますが、「ユーザー層」「表示の最適化」「信頼性」という3つの観点で見ていくと分かりやすいです。 1. ユーザーの閲覧環境はスマホだけではない 確かに、現在の日本ではLP閲覧の7〜... 続きをみる

無題 B 31

F6

無題 B 30

F6

カラーピッカーという拡張機能について

デザインやWeb制作をしていると、気になる色を「この色コード何だろう？」と思うことがよくあります。そんなときに便利なのが「カラーピッカー」という拡張機能です。この記事では、カラーピッカーの基本的な使い方や、デザイン作業を効率化する活用方法について紹介します。 カラーピッカーとは？ カラーピッカーとは... 続きをみる

IllustratorとPhotoshopの違い

デザインの世界では欠かせない存在である「Adobe Illustrator」と「Adobe Photoshop」。どちらもプロの現場で広く使われていますが、実は用途や得意分野が大きく異なります。ここでは、それぞれの特徴と使い分けのポイントを分かりやすく解説します。 ■ Illustratorとは I... 続きをみる

無題 B 29

F6

無題 B 28

F6

無題 B 27

F6

無題 B 26

F6

無題 B 25

F6

無題 B 24

F6

無題 B 23

F6

無題 B 22

F6

理想はアップデートしていくようにデザインしたい

こんにちは、ヒロシです。 何となく現状に不満があるわけではないけれども、期待を持てるわけでもない。 そうした時に、不安な気持ちになってしまったり、モチベーションを落としているように感じられてしまうかもしれません。 昨日と同じ今日が何となくやってくる。 そんな毎日の繰り返しは、あなたの脳にとっては、苦... 続きをみる

無題 B 21

F6

無題 B 20

F6

無題 B 19

F6

コンポーネント化とは？メリットも解説！

Web制作やアプリ開発の現場でよく耳にする「コンポーネント化」。 これは、デザインやコードをパーツ（部品）ごとに分けて管理・再利用できるようにする考え方のことです。 たとえば、LP（ランディングページ）を作るとき、 ヘッダー・フッター・CTAボタン・カードデザインなどがページのあちこちで何度も登場し... 続きをみる

無題 B 18

F6

バナーとは？初心者にもわかりやすく解説

バナーの基本 「バナー」とは、ウェブサイトやSNSなどで使われる画像広告やリンク付きの視覚的な要素のことです。 クリックすると特定のページ（例：商品ページ、キャンペーンページ、LINE登録フォームなど）へ誘導できる仕組みになっています。 つまり、**「目立つ入口」や「案内板」**のような役割を果たし... 続きをみる

無題 B 17

F6

無題 B 16

F6

〈新作発表〉4つの星に1つ追加しようのデザイン 次こそSUZURIでピックアップだ！

Moin!（モイン！） おはよう！ 久しぶりの新デザインです このデザインは、以前、星をもう一つ増やそうという意味を込めて作ってたのを、今度は手書きで描いたものにしようと新たにつくりました。 もうすぐルヴァンカップの決勝戦！ それに向けてさりげに身に着けたいものを作りました。 よかったら見てみてくだ... 続きをみる

無題 B 15

F6

無題 B 14

F6

無題 B 12

F6

無題 B 10

F6

無題 B 09

F6

LY系MPVテールランプ4灯化加工｜純正風に光る美しいリアビューへ

まだまだ総社市では暑い日が続いていますが、皆さま体調はいかがでしょうか。 台風22号と23号の影響による被害が少ないことを願いつつ、日々の作業に励んでおります。 今回は、LY系MPVのテールランプを「4灯化」加工した作業の様子をご紹介いたします。 ご依頼の内容 今回の作業は、LY系MPVのテールラン... 続きをみる

無題 B 08

F6

無題 B 07

F6

レスポンシブのpxの基準とは

レスポンシブデザインとは、スマホ・タブレット・PCなど、画面サイズの異なるデバイスでも快適に閲覧できるようにレイアウトを自動で調整する仕組みのことです。 その際に基準となるのが「ブレークポイント」と呼ばれるpx（ピクセル）単位の区切りです。 一般的には、デバイスの画面幅によっていくつかの区分が設けら... 続きをみる

無題 B 05

F6

無題 B 04

F6

無題 B 03

F6

無題 B 02

F6

無題 B 01

F6

無題 A 99

F6

背筋が寒くなる先輩、当たりの後輩

前回、後輩のSちゃんの愚痴を書いた。 （・・）あれ、ちゃんと礼儀正しく挨拶する後輩を メンドクサイとブチ切れるなんて 私、ダメダメ？？？ 私のブログ読んで わ～後輩いじめだーとか思われるよなあ・・・ と、思って、 別部署の人、3人に、 それぞれに、 動作をマネて状況を言ったら 「めんどくさ！」 て、... 続きをみる

無題 A 98

F6

無題 A 97

F6

MUI（Material UI）とは——Reactで“整ったUI”を最短距離で届けるためのデザインシステム

MUI（旧Material-UI）は、GoogleのMaterial Design思想をベースにしたReact向けUIライブラリ群です。ボタンやフォーム、ダイアログといった基礎パーツから、データグリッドなどの高度なコンポーネントまで幅広く提供し、デザインの一貫性と開発スピードを両立させます。現在は「... 続きをみる

無題 A 94

F6

メトロノール

無題 A 93

F6

無題 A 92

F6

タンバリン

F6

無題 A 91

F6

無題 A 90

F6

無題 A 89

F6

無題 A 88

F6

【NEW ITEM】今度こそ「ズッキュン」いただきます！

さり気ないグッズで愛をアピール！ Grüß dich! （グリュース・ディヒ） やあ！ 「スリー、ツー、ゼロ。響きを変えれば、そいつは秘められた言葉になる！」 3（サン）、2（フ）、0（レ）カッコよくない？ 試合ではゴリゴリのユニフォームで応援するけど、カフェやオフィスで「ちょっとアピールしすぎかな... 続きをみる

無題 A 87

F6

無題 A 86

F6

無題 A 85

F6

無題 A 83

F6

無題 A 82

F6

無題 A 81

F6

無題 A 80

F6

【NEWアイテム】My Roar Area 咆哮のエリア 咆哮のエリア これでピックアップだ！

こんにちは！ 新作できました！ その名も My Roar Area 咆哮のエリア 燃え上がる情熱を着る！「My Roar Area」Tシャツサッカーファンの心を掴む、究極のホームスタジアムTシャツ「My Roar Area」。このフレーズは、あなたのホームスタジアムを「咆哮のエリア」として讃え、サポ... 続きをみる

無題 A 79

F6

無題 A 78

F6

無題 A 77

F6

無題 A 76

F6

無題 A 75

F6

無題 A 74

F6

無題 A 73

F6

CSS設計とは

Webサイトを作るときに欠かせないのが「CSS（Cascading Style Sheets）」です。デザインを形にし、文字の大きさや色、余白、レイアウトなどを決めていくための言語ですが、自由度が高い分、気をつけないと「書きにくい・読みにくい・直しにくい」コードになってしまうこともあります。そこで重... 続きをみる

無題 A 72

F6

無題 A 71

F6

無題 A 70

F6

無題 A 68

F6

無題 A 67

F6

無題 A 66

F6