新デザできた visual

新しいサイトデザインが完成しました。今回はアイコンやイラストなどビジュアル要素多めにしました。

要素的には前回と変わりませんが、サイト説明文や色の見直し、機能の追加など細かいアレが多めです。

Figmaの様子

Figmaの使い方とサイトデザインの基礎を学んだので主なデザインはFigmaでやった。アイコン作るのに便利じゃった。

でもFigmaやらPhotoshopやらConceptsやらProcreateやらいろんなツールを行き来しないとあんま全部は作れんな。各ツールを使いこなす段階まではいっていない。月額払うのはPhotoshopだけだからいいんだが、あまり人にお勧めできんな。

相変わらずJavaScriptとPHPはCopilotに書いてもらっている。

RSSフィード

notesとworksのヘッダーにRSSフィードのURLをコピーするボタンを作りました。

notesのヘッダー

RSS配信はどういうやり方が簡単かな〜っていろいろ考えたのですが、自動化できるほどの技術はなく、更新のやり方が独特なので他者製の自動化ツールも使えず、RSSのためにてがろぐを導入するというのも手間がかかると思い、結局は手打ちになりました。

しかしCopilotにめっちゃ見やすいコードを書いてもらったので更新しやすくはなりました。

メインで動かす下の方の記述がめっちゃわかりやすい感じになった。

このコードはテンプレート化しておさがりで配布しています。

RSSフィード(PHP)のテンプレート(別のタブで開きます)

ヘッダーまわり

ヘッダーまわりのアイコンもおさがりで配布しました。

アイコン配布ページ(別のタブで開きます)

これらのアイコン(ホームへ戻るボタン、RSSボタン、ナビゲーションボタン)はFigmaで作ってSVG形式で書き出したのですが、やっとSVGの使い方が理解できました。

SVG形式の画像はコードで描かれているため、HTMLに埋め込んだりCSSでデザインを変更したりできるという特徴があります。画像としてのデータサイズが小さいという利点もあると思いますが、なんといってもダークモード対応のための色変更が簡単なところが有用でした。

ホバーした時の見た目の変更などのアニメーションもSVGならやりやすいだろうな。

Waveboxの返信

私はあまり雑談記事を投稿しないタイプなので、「サイト内返信」だと不便であることに気がつきました。Waveboxでコメントを頂いたらWavebox内で返信するようにします。

RSSといいWaveboxといい仕様変更しがちですが、だいぶサイト制作も慣れてきたので今後は変更しないと思います。 しないんじゃないかな。まちょっと覚悟はしておけ。

メインビジュアル

メインビジュアル

メインビジュアルとかアイコン作るの苦手なんだよな。綺麗に枠に収まる絵が作れない。

絵を描くときにコンセプトとか構図とか全然考えていない。そのせいだと思うんだけど、今回は色のついた新しい絵をメインビジュアルにしておきました。

漫画を描く脳とイラストを描く脳とデザインをする脳と美術をする脳が統合したらもうちょっと絵を作るのが上手になるかもしれないから、そういう意識で頑張っていきたいです。いま紙も色画材もいっぱいあって描き放題なので大丈夫です!

#更新履歴