長谷川満＠制作業

デザイナー | WEB・印刷物・立体造形 | 制作関連の忘備録や気付き、知識のアウトプ…

長谷川満＠制作業

デザイナー | WEB・印刷物・立体造形 | 制作関連の忘備録や気付き、知識のアウトプット等
すべてのマガジンを表示
  • 固定された記事

新UIトレンド「ニューモーフィズム」に見るデザインの過去と今後

WEBサイトを含むUIのトレンドを掘り下げ、新UIトレンド「ニューモーフィズム」についても考察してみたので共有します。 今回も個人的所感です。 UIの流行り廃りデバイスの高スペック化、閲覧環境の変化、大衆のUI体験の向上等の様々な要素が相まって、美しい・良いとされるUIデザインの様相は常に変化します。代表的なスタイルの移り変わりは以下の通り。 質感のある「スキューモーフィズム」スキューモーフィズム（skeuomorphism）は現実にある物質の質感に似せるデザイン様式で、

長谷川満＠制作業

    • JIS慣用色の覚え方「ビジュアルで覚えるJIS慣用色ver.2」

      以前自分の色彩検定受験用に作成した、「ビジュアルで覚えるJIS慣用色」カードにアップデートを行いました。 以前自分の記憶用にざっと作ったものを洗練させたかったという理由の他、クリエイターがどのように生成系AIと向き合っていくのか、制作を通じて模索したかったのが理由です。自動化は総当たり戦等の数量に対して真価を発揮するので、枚数が多いカードは特に向いているはず。 前回同様制作物がどなたかの学習に役立つほか、AI利用の観点で参考になれば嬉しいです。今回はデザイン的な工夫の解説

      長谷川満＠制作業

      • デザイン観察-ラ・クレメーヌ（洋菓子パッケージ）

        自分のデザイン性を高めるため、久しぶりにいいなと直感的に感じたクリエイティブを観察し、「なぜよいと思ったのか？」簡単に考察していきます！ ※全て個人の所感です。 ラ・クレメーヌ（洋菓子）駅構内で販売されているのを見かけて、パッケージに惹かれて購入しました。 商品や写真については、以下サイトより引用しています。 パッケージ画像は公式オンラインショップより引用しています。 観察ポイント波打つグラデーション 各パッケージ上部に波打ったラインが、折加工とともに施されています

        長谷川満＠制作業

        • 【適宜更新】シルバー925鋳造収縮率の実測（DMM.make）

          ３Dデータに基づくシルバー造形サービスを利用した場合、どの程度制作データから収縮されるのか、過去の実測データは有益だと考え公開します。 実際に制作する度に更新していくので、同じようなクリエイターのお役立てば幸いです。 ※シルバーの収縮率は、製造工程やデザイン、大きさ等に応じて変化します。あくまで参考として認識ください。 製造条件主に以下条件で製造を行っています。 利用サービス：DMM.make 素材：シルバー 製法：ロストワックス鋳造 仕上げ：鏡面 製品：指輪

          長谷川満＠制作業
        • 固定された記事

        新UIトレンド「ニューモーフィズム」に見るデザインの過去と今後

        長谷川満＠制作業

        マガジン

        • 立体造形
          4本
        • コーディング
          11本
        • WEB＆UI
          40本
        • デザイン
          9本
        • コラム
          10本
        • 機材
          18本

        記事

          【CSS】背景だけにブレンドモードを適用する方法（mix-blend-mode）

          備忘録までに記載しておきます。いろいろ方法がありますが、一例まで。 プロパティ「mix-blend-mode」とは概要 その要素の背景と”どのように”重ねるかを決められるプロパティです。 Adobe系アプリケーションでいうなれば描画モードです。 以下のように上に重なる要素に適用することで、背景と前面が文字通りブレンドされます。 <div class="parent"> <p class="text">Red</p> <div class="child"> <

          長谷川満＠制作業

          【CSS】背景だけにブレンドモードを適用する方法（mix-blend-mode）

          長谷川満＠制作業

          ARGB／RGB端子（ピン）無しマザーボートで、電飾LEDを発光

          今回初めて、LED付きのパーツを使用してPCを組み上げました。 実際にやってみると詳しくないことが多くて勉強になったので、念のために共有しておきます。 特に、マザーボートに4ピンRGBや3ピンARGBがない場合の対処が参考になれば嬉しいです。 ARGB／RGB端子（ピン）とは主にPCパーツのLEDに用いられる仕様はいくつかありますが、ARGB／RGBは発色情報をマザーボートに入出力することで、発色を制御できるものです。 よって、ソフトウェア上で色を調整したり、マシンの動作

          長谷川満＠制作業

          ARGB／RGB端子（ピン）無しマザーボートで、電飾LEDを発光

          長谷川満＠制作業

          （ASUSマザーボート）UEFIモードでOSをインストールする方法

          windows 11 からレガシーBIOSモードが許されず、UEFIモードのみアップデート対象となりました。 理屈は知っていたのに、少してこずってしまったので備忘録として残しておきます。 BIOS・UEFIとはwindowsの場合、「ファイルを指定して実行」→「MSInfo32」入力→「BIOSモード」の項目で確認できます。 OSを再インストールすることなく、モード切り替えを行う場合扱うファイル形式が異なるため、本来はOSの再インストールが必要ですが、上記サイトにあるよ

          長谷川満＠制作業

          （ASUSマザーボート）UEFIモードでOSをインストールする方法

          長谷川満＠制作業

          PCパーツ相性・動作報告（H310M-AT／Core i5-9500／CORSAIR DDR4／TUF-GTX1660S-O6G-GAMING）

          諸事情により以下のパーツ構成でPCを組み上げました。 最近はあまりパーツ同士の相性による不具合や問題は聞きませんが、念のため残しておきます。 同じ型番の組み合わせで構築される方が、ググった時に安心できれば嬉しいです。 構成相性の懸念がないパーツや、既得パーツは省略しています。 マザーボート：Asus H310M-AT R2.0 CPU：intel Core i5-9500 CPUクーラー：Vetroo CPUクーラー 120mm ARGB メモリ：CORSAIR D

          長谷川満＠制作業

          PCパーツ相性・動作報告（H310M-AT／Core i5-9500／CORSAIR DDR4／TUF-GTX1660S-O6G-GAMING）

          長谷川満＠制作業

          FDM式3Dプリンタの底面レイヤーに生じる凹み対策その②

          少し前に「FDM式3Dプリンタで印刷する際、最底面レイヤーにできる隙間を目立たないようにする」方法を共有しました。 今回実験を重ねて気づいたことがったので、改めて残しておきます。同じような問題に取り組む方のヒントになれば嬉しいです。 前回は、どちらかというと「凹みが生じにくいデータ作り」でしたが、今回はノズルの速度に関するお話しです。 隙間が生じる原因フィラメントが途切れる箇所が発生する その①で記載した原因に加えて、データは完璧でも印刷時にも問題があることがわかりま

          長谷川満＠制作業

          FDM式3Dプリンタの底面レイヤーに生じる凹み対策その②

          長谷川満＠制作業

          FDM式3Dプリンタの底面レイヤーに生じる凹み対策その①

          FDM式3Dプリンタで印刷する際、どうしても最底面レイヤー（最初に印刷する面）にできる隙間を目立たないようにしたくて試行錯誤していました。 私見ですが、同じような問題に取り組む方のヒントになれば嬉しいです。 （追記）その②はこちら 隙間が生じる原因フィラメントの湿度 印刷する際にパチパチと音が頻繁になる場合は、水分を含んでしまって劣化している可能性が高いです。 水分を含んだフィラメントを使用すると、プレートの定着が悪くなり印刷失敗や反りの原因になるだけではなく、穴が生

          長谷川満＠制作業

          FDM式3Dプリンタの底面レイヤーに生じる凹み対策その①

          長谷川満＠制作業

          「The State of CSS 2021」で振り返るCSSの近況（後編）

          引き続き、昨今のCSS状況を「The State of CSS」にて振り返ります。 以下のサイトに掲載されている内容のうち、使用率が高いもの、馴染みがないものや忘れているものを中心に調べ直しています。 今回は後編として、インタラクション、タイポグラフィ、アクセスビリティ、フレームワーク他についてまとめます。 前編はこちら インタラクション関連pointer-events 主に、子要素や兄弟要素、疑似要素等、当該の要素以外をポインターのトリガーにする際に重宝します。

          長谷川満＠制作業

          「The State of CSS 2021」で振り返るCSSの近況（後編）

          長谷川満＠制作業

          3Dプリンタでぬいぐるみスタンド制作

          今回は小型のぬいぐるみを立たせるスタンドを自作してみました！その制作記録を残しておきます。データが欲しいかたは共有するのでお気軽にご連絡ください。 背景いい大人ですがいまだゲームセンターのクレーンゲームが好きで、今でもよく足を運びます。最近はこのシリーズを集めています。 そこで困ったのが獲得した景品のディスプレイ方法です。 大半のぬいぐるみは直置きしても自立するよう作られているので何とかなりますが、この景品のようにチェーンの付いた小物はぶらさげて使うことが前提です。

          長谷川満＠制作業

          3Dプリンタでぬいぐるみスタンド制作

          長谷川満＠制作業

          「The State of CSS 2021」で振り返るCSSの近況（前編）

          昨年同様、昨今のCSS状況を「The State of CSS」にて振り返ります。 今年も以下のサイトに掲載されている内容のうち、馴染みがないものや忘れているものを中心に調べ直しました。 まず前編として、レイアウト関連、シェープや配色関連についてまとめます。 去年のまとめ レイアウト関連SUBGRID 以前も扱った気がしますが、グリッドの中にさらにグリッドを簡単に設けることができるプロパティです。現在ほぼすべてのモダンブラウザで実装されているため、さらにグリッドを使っ

          長谷川満＠制作業

          「The State of CSS 2021」で振り返るCSSの近況（前編）

          長谷川満＠制作業

          【3Dプリンタ】Ender3v2と同時購入するべき備品とトラブル対処

          3Dプリンタ購入後、あらゆるものを造形しては具現化する工程を楽しんできました。 その過程で最初から買っておいた方がよかった備品が多いなと感じたので、ここにまとめておきます。 また、印刷が上手く行かない際の対応策も経験則に基づいて記載します。 前提私が所有しているモデルCrealityの「Ender3 v2」を前提としますが、FDM方式（熱溶解積層方式）なら代替同じだと思います。参考になれば幸いです。 プラットフォームシート実質の必需品です。FDM方式は、フィラメントがプ

          長谷川満＠制作業

          【3Dプリンタ】Ender3v2と同時購入するべき備品とトラブル対処

          長谷川満＠制作業

          【CSS】市民権を得たmin関数、max関数、clamp関数について振り返る

          先日flexboxにおけるgapプロパティに関して扱いました。他にもここ数年で一般的なブラウザで通常利用できるようになったCSS機能は多く、その中でも従来の記述方法を大きく覆すほどのものを備忘録のため取り上げていきます。 すでに一般的に広まっている内容ですが、参考まで。 min関数 プロパティにおける値において、通常の値と最大値をまとめて設定できるものです。 width: min(50vw, 200px); 「min」なのに最大値となる理由は、「入力されたいずれかの

          長谷川満＠制作業

          【CSS】市民権を得たmin関数、max関数、clamp関数について振り返る

          長谷川満＠制作業

          【CSS】flexboxのgapプロパティが安定して利用可能に

          去年（2021年）辺りから安定してきたflexboxのgapプロパティについて、今更ながら振り返ります。 flexboxにおけるgapとは文字通り、flexレイアウトにおける要素間がどの程度離れているかを設定できます。2方向指定する場合は、縦方向と横方向の順です。 gridレイアウトのgap設定が、flexでも同様に使用できるようになりました。 .parent{display:flex;gap: 30px 20px;}.parent{display:flex;colum

          長谷川満＠制作業

          【CSS】flexboxのgapプロパティが安定して利用可能に

          長谷川満＠制作業