読者です 読者をやめる 読者になる 読者になる

Hope is a Dream. Dream is a Hope.

非公開ふぃふぃ工房ブログ

↓LINE登録はこちら↓

定期的につぶやいてます. 記事に興味を持って頂いたかたや、Line Botを使ってみたいかたは試しに登録どうぞ

友だち追加

プロフィールページを作った

こんにちわ。 ふぃふぃです。

ふと。

プロフィールページを作ろうと思い。

HTMLを書いてみました。

ただ、そのまま書くのは面倒なので、どうにかMarkdownファイルをパースしてHTML化したかった。

しらべるとjavascriptでうまいこと簡単にやってくれるみたい。

Marked.js で Markdown をクライアント側でパースして表示する - Qiita

完成したのがこれ。。

Profile | FiFiFactory

んー。いまいち。

いつもデザインを考えずに、コーディングからしちゃう。今回も結局markdownの自動パースをしたかっただけ。で。最後に結局何がしたかったかわからなくなる。 やっぱり最後に伝えるのはデザインだと痛感。

なので。

デザインしてみる。ただAdobeMacbookでは重いのとタッチパッドでできない。そしてソファから勉強部屋に移動したくない。。

sketchを使って見る。

UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由 | 株式会社LIG

Sketchは完全にWebとモバイルUIデザインの専用ツールなので、それ以外の余計な機能が入っていません。そのため不要な機能に邪魔されず、スムーズに綺麗なデザインを作っていけます。

どうも記事を読むと、WEBに特化しているのと操作が簡単らしい。ベクター系のアプリは使って楽しいので試してみた。

f:id:hope_is_dream:20160208200023p:plain

操作がとても簡単。これまで10分。ベクター系アプリなので超高速。ひとまず体験版を使ってみてるが、100ドルくらいで買えるみたい。sketchいいね。

Sketch - Professional Digital Design for Mac

そしてできたのが。。

f:id:hope_is_dream:20160208195301j:plain

あとはこれをHTMLに書き直してアップ完成。(CSSウマクカケルカ・・)

ふぃ。