牛乳や卵など、栄養価の高い材料で作られ、小麦粉やバターも使わないことから、カロリーも低め。 プリンが昔から家庭で作られてきた背景には、調理法が簡単という理由だけでなく、栄養価的にも優れた一面があったからだ。 今回、本誌のため特別に秘伝のレシピを公開してくれるのは岐阜で洋菓子店『プルシック』を構える所浩史さん。開発に携わった『パステル』の「なめらかプリン」で一時代を築き、プリン一筋30年以上、業界で「伝説のプリン職人」とも称されている。 指導　所浩史さん（パティシエ・61歳） 『プルシック』オーナーシェフ。都内の洋菓子店で修業後、平成３年に「チタカ・インター ナショナル・フーズ」入社、２年後に「なめらかプリン」を開発。平成22年に現店をオープン。

「3Dアーティスト はじめの一歩」シリーズの最終回です。今回は、20年の経験を活かし、Paul Hatton氏 が作品を成功に導くための 10の秘訣を紹介します はじめに 「3Dアーティスト はじめの一歩」シリーズは、ソフトウェア、ハードウェア、リソース、チュートリアル などを順に取り上げ、3Dアーティストとしてのエキサイティングな旅の前準備、正しい方向に進むための要素を掘り下げます（※全6回）。 >> はじめの一歩：3Dモデリングソフト >> はじめの一歩：レンダリングソフト >> はじめの一歩：ハードウェア >> はじめの一歩：チュートリアル >> はじめの一歩：リソース 3Dビジュアライゼーションの世界に足を踏み入れたのは、新人のとき、私が19歳、右も左もわからない状態でした。そんな旅の途中で、多くの人々に助けられました（とても感謝しています）。このシリーズが、3Dアーティストを目指

近未来的なかっこいい印象を与えるグラデーションを使用した、テキスト・ボタン・背景のスタイルを実装するCSSのテクニックを紹介します。 白地のテキストをわずかに輝かせたり、ダークモードに映えるグラデーションでテキストやボタンを目立たせたり、カードに美しいグラデーションの背景を実装したり、少し色味を変えてライトモードに使用してもかっこいいグラデーションです。 CSS Tricks to Create that Dark Futuristic Web3 Look by Trisha Lim 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに かっこいいグラデーション使用したテキストのスタイル かっこいいグラデーション使用したボタンのスタイル かっこいいグラデーション使用した背景のスタイル はじめに ダークモードのWeb3の美しさ

いずれもMITライセンスで公開されていますので、個人・商用問わず利用可能です。 Slick.js Slickスリック.jsは簡潔なコードで実装できるのが特徴のモバイルフレンドリーなカルーセルライブラリです。機能は少なめですが、ナビゲーションや表示するスライド数を変更するといった基本的な機能は備わっています。jQueryプラグインのため実装にはjQueryを読み込む必要があります。タッチ・スワイプ操作にも対応しています。ReactやVue向けのモジュール、TypeScriptのサポートは公式で提供されていませんがOSSで存在します。 このJSライブラリの基本的な実装と、アニメーションをフェードに変えた作例を用意しました。 基本の作例 サンプルを別ウインドウで開く コードを確認する <div class="slick carousel"> <div>1</div> <div>2</div> <

つまり「単純に見た目を追求」する勉強と「論理的にデザインを考える」勉強の２通りあるということだ。 この2つの順番としては、まず（２）を考えてから、その上で（１）を考えてデザインする。 しかし、初心者のうちは２つを切り離して別々に考えてもいいだろう。 まず最初は(1)の見た目にキレイで美しいデザイン練習をして、デザインを楽しむことから初めて、そのあと(2)の効果的なデザインについて考えながらデザインの練習をするという方法もありなのではないかと思う。 どんなデザインテイストの模写をすれば良いのか？ 最初にどんなテイストのデザインの模写をはじめればよいかというと、その人のレベルにもよるが、初心者であれば、自分が好きなテイストや得意とするデザインテイストの参考サイトを探して、模写してみよう！ なにより自分が好きで得意なデザインスキルを伸ばして「自分のデザインの強みを作る」ことが先決だからだ！いわゆ

近年はコンピューターグラフィックス(CG)が長足の進歩を遂げており、アニメや漫画などの映像・画像コンテンツの制作やゲーム・VRなどのインタラクティブコンテンツの制作などに用いられる一般的な手法として定着しています。そんな現代のCGでもリアル感を出すのが特に難しい「人間の肌」について、アメリカのニュースメディア・Voxが「CGで肌のリアル感を出すのが難しい理由」を解説しています。 Why it’s so hard to make CGI skin look real - YouTube 以下は、2001年公開の「映画版ファイナルファンタジー」と2019年公開の「アリータ：バトル・エンジェル」におけるメインキャラクターが目覚めるシーンを並べたものです。この2つの映画にはおよそ20年の隔たりがあり、映像を見るとCGに大きなブレイクスルーが生じたことが示されています。 映画版ファイナルファンタジー

覚えておくと便利なCSSデザインTipsを9つ集めてみたUpdate2023.05.18Release2023.05.18Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置をCSSで調整する見出しの改行位置を調整する見出しの文章が中央揃えである程度の文字数があると、スマホで見た場合意図したところで改行ができていないことがあります。上の動画をご覧ください。上側の文章は改行されると2行目3行目も中央寄りになるため、画面サイズによっては最終行が1〜3文字になってしまい

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第5弾は、ユーザーエクスペリンスやインタラクションに関するテクニックです。 UI & UX Micro-Tips: Volume Five. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フォントサイズやグリッドは時にはルールを曲げてもよい 2. エラーメッセージは親切で分かりやすいものにする 3. ロード中は何が起きているのか分かるようにする 4. アクションを実行した際に何が起きるのか分かるようにする 5. タブバーには重要なアイテムだけを表示する 6. ドロップダウンに重要なアクションを隠さない

CSS変数（カスタムプロパティ）は、文字通りCSSで変数が使用できるので非常に便利です。CSS変数の使い方でよく聞くのはカラーですが、それ以外にもさまざまな優れた使い方があります。 WebサイトやスマホアプリのUIで、特にコンポーネントのバリエーションを実装するのに役立つCSS変数の使い方を紹介します。 Practical Use Cases For CSS Variables by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS変数を活用できてない例 CSS変数の優れた使い方 1: ロングハンドのプロパティ CSS変数の優れた使い方 2: 背景 CSS変数の優れた使い方 3: グラデーション CSS変数の優れた使い方 4: クリップパス CSS変数の優れた使い方 5: チェックボッ

2021年5月27日 Webサイト制作, フリーランス フリーランスWebデザイナーを目指して日々勉強をしているみなさん、そろそろ実案件を受けようと準備を進めているみなさん、いかがお過ごしでしょうか？スキルの向上は実践あるのみ…と言われますが、最初のうちはその実践を積む機会がなかなか持てませんよね。今回はそんな新人のみなさんが最初に案件を取るまでのお話を書いてみます。 ↑私が10年以上利用している会計ソフト！ 新人フリーランスWebデザイナーは仕事を受けにくい？ 答えはYES。新人を雇わない理由はたくさんあります。まずは品質への不安。クライアントの立場で考えてみると、やはりクオリティの低いサービスは受けたくありません。そして指定した時間通りに納品してくれるかも不安です。つまり信頼がないわけですね。 一度も案件をこなしたことのない新人にはレビューも実績もありません。品質がどんなものなのか、納

この記事では現役デザイナーDmitriy Buninが、より良いアイコンをデザインするときに心がけている8個のポイントをまとめてご紹介します。 WebサイトのUIインターフェースにおいてアイコンは重要なデザイン要素のひとつです。 アイコンは、コマンドやコンテンツを視覚的にあらわし、背後にある意味合いを伝える言語と言えます。ユーザーがすぐに理解、認識できるようにシンプルで効果的なビジュアル、メタファーを表現する必要があります。 現役デザイナー直伝、アイコンデザインがもっと良くなる８個のヒント ヒント１ – グリッドを設定しよう アイコンはひとつだけ作るのではなく、ほとんどの場合はセットでデザインすることになります。アイコンセットの統一感を持たせるにはグリッドが必要となります。 以下サンプル例のようにセーフゾーンを決め、キーラインを設定しましょう。アイコンのまわりには、少しの余白スペース（Bo

この記事では、ウェブデザイン制作で活用したいユーザーの視線を釘付けにする最新UIインタラクション、アニメーションをまとめてご紹介します。 Webサイトやスマホアプリのデザイン作成の参考サンプルとして活用したい、ユニークで素敵なアニメーションを中心に揃えています。 アニメーションで魅せる！Web制作の参考UIインタラクション40個まとめ Web Animation 商品ページが切り替わるのに合わせてボトルも一緒に回転します。

トップ ＞ インタビュー ＞ まったくのCG初心者が1年でここまで成長!?　講師と生徒がふり返る、Blender習得の道のり 「反復練習」で自信と根気を養おう！ CGW：第40回からは「背景モデリング」として、建物の外観と駐車場などを制作されたんですね。 西原：ここまでつくれるようになると、「CGをやっているぜ」みたいな気分になってきました（笑）。写実的なものをつくると「つくった感」がありますよね。「新築できた！」みたいな。 ▲「第47回：背景モデリング初級編（8）～道路や駐車場をモデリングする～」 CGW：そして、第48回からは難関の「クルマモデリング」ですね。 西原：ここから一気にハードルが上がりましたね。それまでは、円柱や四角の変形からつくっていくものが多かったのですが、クルマのモデリングでは写真から頂点やポリゴンを生成してつくっていくという手法に変わりました。今、改めてデータを見直

この記事では、Webデザイン制作をもっと楽にする最新オンラインツール45個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行ってくれたりと、より快適にプロジェクトを進めることができる便利ツールが揃います。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8.

まずはフォトショップを開き、新しいドキュメントを作成しましょう。カラーモードは「RGBカラー 16bit」とすることで、よりなめらかなグラデーションを表現できます。今回は、3840x2160pxの4Kサイズで作成していきます。 ツールボックスより「文字ツールT」を選択したら、お好みのフォントをつかって描画色「白（#ffffff）」で文字テキストを入力しましょう。 今回利用したフォントは Moisterですが、どんな文字やロゴなどでも特に問題ありません。ただし、あまり太いシェイプや書体はぼやけた仕上がりになるため微調整が必要となります。

コーディングをしていて意外と面倒なのがフォームのカスタマイズです。 ブラウザによって見た目がまちまちで、サイトのデザインとマッチしないことも多々あります。ただ、デフォルトのスタイルをリセットしてカスタマイズしようとしても、他のHTML要素と違って色々と面倒な点もあります。 また、カスタマイズする際はアクセシビリティにも考慮しなければいけません。 フォームのデザインは、オシャレにする必要はありません。ユーザにとってわかりやすいものにすることがベストです。 この記事では、最低限のアクセシビリティを意識した、フォームのカスタマイズを紹介します。 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。