再び、記事一覧のデザイン変更 11:58:45 昨日、codexとこちらのブログのデザイン変更を行った https://github.com/ki-hi-ro/ki-hi-ro.com-2022/commit/cb10110f9e1f606dc23158af8846e30914f2f609 トップの記事一覧を雑誌風にしてもらったが、 朝起きてみてみたら、元の丸いデザインの方がいいなと直感的に思った codexにチャッピーに以前作ってもらったデザインを提示する AIプログラマーのcodexにAIコンサルタントのチャッピーからもらった以下のデザインを提示して修正してもらおう 記事一覧へ戻るは不要 年月などのテイストもそれに合わせてもらおう せっかくなのでチャッピーにcodexへの指示書… Webデザイン ブログ運営
マスの整列を分かりやすくした 以下のように、絵文字のバツと中央のFREEが、マスの整列を乱していた。 マスが整然と並び、視覚的に分かりやすくなった ソースコードの修正箇所 コミットURL https://github.com/ki-hi-ro/bingo/commit/d2f5066c1f719dd71d1cd0233cb58302fc07b1fe Webデザイン 個人開発
画像の「フェードアウト」と「ふわっと出現」を実現したページ 2年くらい前に作成したページを公開する。 そのページはこちら 名古屋 | ki-hi-ro.com 画像のフェードアウトの参考ページ こちらのサイトは、2024年8月末から、書籍購入者の限定サイトになるらしい。 動きを組み合わせて全画面で見せる | 動くWebデザインアイディア帳 画像のふわっと出現の参考ページ 作成当時と内容に変更があるかもしれないが、おそらくこちらのページ。 jQuery とCSS を組み合わせてスクロールをしたら要素を動かす | 動くWebデザインアイディア帳 HTML・CSS Webデザイン
Storybookを試してみた Storybookは、UIコンポーネントのカタログです。 Storybookの存在は以下の本を読んだ時に知りました。 TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 | 手島 拓也, 吉田 健人, 高林 佳稀 |本 | 通販 | Amazon Storybookのインストール WordPressでStorybookを使おうとしたところ、おそらく依存ファイルが足りないなどの理由で、上手くいきませんでした。 なので、Next.jsで使ってみることにしました。 公式サイトのドキュメントに従って、インストールを行いました。 まずは以下のコマンドをターミナルで打ち込みました（HTMLとありますが、ターミナルに打ち込んだコー… Webアプリ開発 Webデザイン
ローディングアニメーションを作成してみた 年末あたりに、知り合いのWEBデザイナーさんからコーディングの依頼が来ると思います。 事前準備として、jQueryを使用したローディングアニメーションの学習ブログを書いておきます。 ローディングアニメーションとは？ こちらのユナイテッドアローズを開いたときに表示されるような、画面読み込み時に発生するアニメーションのことです。 https://www.united-arrows.co.jp/ https://www.united-arrows.co.jp/ 今回やってみたこと 当サイトで、画面読み込み時にローディングアニメーションを行ってみました。 作成手順 ロゴの作成 HTMLの配置 SASSの記述 JSの記述 ロゴの作成 adobe XDでロゴを作成… HTML・CSS Webデザイン
vuetify vuetifyについて調べてみました。 vuetifyとは？ Vue.jsのUIフレームワークです。 始め方 https://next.vuetifyjs.com/en/getting-started/installation/#installation 公式ドキュメントの流れに沿って、進めていきました。 vuetifyのインストール yarn create vuetify を入力すると、以下のようになりました。 Mac:vuetify shibatahiroshitaka$ yarn create vuetify yarn create v1.22.4 [1/4] 🔍 Resolving packages... [2/… Vue.js Webデザイン
Illustratorから画像を書き出す方法 先日行ったLPのコーディングで、Illustratorのデザインからコーディングを行いました。 これまではadobeXDからコーディングすることが多かったので、Illustratorから画像を書き出すときに少し苦戦しました。 今はIllustratorからの画像書き出しにも慣れてきたので、方法をまとめていきます。 全体の流れ 書き出したい画像を選択する 右クリックで「アセットの書き出し」に追加する 「アセットの書き出し」から画像を書き出す STEP1: 書き出したい画像を選択する まずは書き出したい画像をクリックして選択します。 今回は、例として雲を書き出したいとします。 複数の場合は、Shiftを押しながら選択します。 STEP2: 右クリックで「ア… Webデザイン
デザインカンプ固有のフォントをCSSで再現する方法 先日LPコーディングを行った際に、XDのデザインデータで指定されていたフォントを完全に再現することが出来なかったので、CSSでデザインのフォントを再現するにはどうすればいいのかについて書いていきます。 今回再現できなかったフォントと代替フォント 今回再現できなかったフォント 今回、デザインデータで指定されていたフォントは、FOT-筑紫B丸ゴシック Stdです。 XDでの表示 代替フォント 代替フォントとして、「Yu gothic」を設定しました。 ブラウザ上の表示 ソースコード 以下のコードを使用して、フォントの設定を行いました。 body { font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN",… HTML・CSS Webデザイン
デザインカンプを作ってみます これまでに、WEBデザインを作成する機会があまりなかったので、WEBデザインもやってみようと思いました。 そこで、こちらの参考サイト(PLANT)をXDで再現してみます。 PLANTとは " PLANTは、ブランディングを軸にしたコンセプト開発、ロゴやビジネスツールなどのグラフィックデザインと、Webサービスやコーポレートサイトなどオンスクリーンメディアに関するUIデザインを提供しています。" 出典: 同サイトのdescription 本日行ったこと 本日は、Adobe XDで、アートボードの準備を行いました。(共有URLは、こちら) 次回以降、デザインを作成していきます。 Webデザイン
売れる商品画像の作り方 先日、有り難いことに商品画像を作成する機会を頂けたので、売れる商品画像の作り方についてググりました。その中で得られた情報をまとめてアウトプットしていきます。 実物を手に取れない代わりに ECサイトでは実店舗のように実物に触れることができません。そのため、商品画像で質感などの情報をアピールすることが必要です。また、寸法の情報を正確に記載することも重要です。 例えばこちらのタオルの商品画像は、柔らかさをアピールしています。 出典: PayPayモール 白背景がいい 白以外の背景だと目の錯覚で商品そのものの色が変化してしまいます。商品そのものの色味を伝えるために、白背景にするのがいいでしょう。 例えば、こちらのモスピンクのタオルは、背景画像が白色のため、モス… Webデザイン
