Code Fan 49

中年で開発に目覚めたおじさんの技術ブログ。WordPress・Rails・Cloud9などなど。

【50歳からのRailsアプリ開発 vol.1】トップページのワイヤー作成

はじめに

2018年。さあさあ、もうやる気を出していけなくてはいけませんね。 今日はさっさと雑用(更新とか)と冬休み宿題のWPデモ作成を済ませたので、こちらに取り掛かります。 まずはRailsTutorialの文法?に従い、ワイヤーフレームの作成から進めます。

再確認しますが、作成するのは、 「キャリアを全世界中に公開し求職に役立てるサービス」です。

Adobe XD

僕はDTPからWEBデザイナーになったという歴があるので、Adobe製品を愛しています。 XDもワイヤー作成の時に愛用しています。 さっさと枠だけ作ることもできるしそれなりにビジュアルに凝ることもできて便利。 ネット上にクライアントと共有したりPDFにしたりもできて最強なのです。

で、いくつかワイヤー用のパーツがあるのですが、今回はこのパーツを使って作成。

Behance

ペタペタ貼り付ければ、あらあらもうデザインにかかってるんですか?なんて勘違いされそうなワイヤーが出来上がります。 貼り付けます。

f:id:koyacch:20180109160809p:plain

機能概要

箇条書きでさっさと説明しますねー。 上から順に。。。

  1. header 、名前とメニュー。
  2. hero image、任意の画像とサムネイル。
  3. 簡単な自己紹介文。
  4. 経歴、経験したプロフェクト、論文などの参考ファイルの数。
  5. My Feed、ミニブログ。コメントやいいねがつけられる。
  6. Carrier、履歴書の履歴をフィード状にしたもの。
  7. Contact、コンタクトフォーム。

という概要です。 果たしてこれが作れるのか?という心配はありますが、なんとかなるというキブン?はあります。

次回予告

いきなり動的なところにかかるとめげそうなので、仮に静的ページを当てはめて、ルーティングを決めとこうと思います。 RailsTutorialでいえば、第3章あたりでしょうか。

Ruby on Rails チュートリアル:実例を使って Rails を学ぼう