シンプルでフラットなポートフォリオ

Webデザイン

2020年1月21日23:36(

シンプルでフラットなポートフォリオを作成していきます。

自分のポートフォリオサイトは、エンジニアやデザイナーであれば持っていて損はないですし、そんなに複雑にならないことが大半なので、練習としてオススメです。今回はフラットデザインを意識して作っていきます。全体的にシンプルに作っているので、変更や改良などを自分なりに行うのも良いと思いますし、ちょっとしたテンプレートとして使うのも良いかもしれません。

シンプルでフラットな日記帳

Webデザイン

2019年12月12日6:19(

https://narito.ninja/diaries/
今私が使っている日記帳です。私のデザインブログやプログラミングブログと違って、こちらは何かのジャンルに特化したものでなく、割と自由に書いています。禁煙したとか旅行行ったとか、本当に何の変哲もない日記です。

シンプルなフラットデザインの練習として作ったもので、フラットなアイコンがファーストビューに表示され、その後はパネルのような日記一覧が表示されます。個人的には割と満足なデザインです。日記自体にサムネイル画像をつけない仕様なので、一覧画面もテキストのみ。こういった一覧は画像がないと華やかさに欠けますが、テキストだけで上手いことできたように見えます。 アイコンは www.flaticon.com の、 Prosymbols様のモノを利用させてもらっています。ここにはフラットなアイコンが沢山あるので、非常に便利です。

ブログ1

Webデザイン

2019年12月12日6:14(

https://narito.ninja/blog/
ブログのWebデザインです。このブログは、実際に私が使っているブログでもあります。自分の為の、プログラミングに関するメモ帳として作ったので、記事の一覧性や検索機能といった部分が強調されていて、見た目的にできるだけシンプルにしています。投稿や更新などもしやすいようにするため、記事にサムネイル画像はなく、一覧ではテキストのみ表示。

画像に全く頼らないのは中々に難しかったですが、GoogleやBing、Yahoo検索結果のページを真似することにした結果、個人的には満足な結果に。私のような結構長くネットに触れているユーザーにとって、あの検索結果は親の顔より見ているので、非常になじみ深いです。そもそも自分の為のノートで、自分が書いた記事を頻繁に検索しますので、検索結果のような見た目にしたのはそういった意味もあります。

有名フォントの代替フォント、Webフォント編

メモ

2019年12月11日10:52(

Google Fonts等のフォントを配信する専用のサービスもあって、今は多くのフォントが使えるようになりました。

多くのフォントが使えるようにはなりましたが、版権といった大人の都合で無料では使えないフォントもあります。有名なフォントをWebフォントとして使いたいなーと思っても、お金がかかるのです。しかし幸いにも、著名なフォントと似ている(と私が判断した)無料フォントも結構あるので、今回はそれらを紹介していきます。Google Fontsと、Adobe Fontsの2サイトにあるものを紹介します。Adobe Fontsは無料ではないですが、このサイトを見る人はイラレやフォトショを持っている方が多そうだし、その場合は無料で使えるので、ついでに紹介します。