還暦お婆ちゃんのデザイナー修行 - 60歳のお婆ちゃんはウェブデザイナーになりたい!

秋も深まり寒くなってきた昨今。
近所の畑の直売所で秋のマニアック野菜を購入してきました。

f:id:kanrekijyosi:20201108030602j:plain

ズイキ3本...100円
サトイモの茎です。お店ではまず見ませんね。
乾燥したものは「芋がら」としてスーパーで売られています。
シャキシャキとした歯ごたえで味はクセがなく、汁物、鍋、炒め物、何でも合います。
オロ大根3本...90円
葉っぱだけ成長した大根に見えますが、よくわかりません。
葉は大根特有の苦味はなく、ほうれん草や小松菜のように使えます。
ヤーコン4本...200円
食物繊維が多くカロリーが低いイモ類で一時期ダイエットで注目されました。今はスーパーで見かけることはほとんどないです。ちょっとお高めでした。
ゆず4個...100円
マニアック野菜ではないですが、不揃いで傷がついてます。
果汁は薬味で、搾かすはお風呂で再利用。いい香りでした。

還暦ばあちゃん仕事の近況

入社してから5ヶ月目になります。
デザインの修正も少なくなりましたが、まだまだ未熟者です。
ようやく会社の空気感が掴めるようになったというか…

従業員は多いのですがほとんどテレワークなので、連絡している相手に滅多に会うことはありません。

入社時は世間が自粛状態で仕事は比較的暇でした。
徐々に仕事が増えてきて、先月くらいからメチャメチャ忙しくなってきています。お国のGoToキャンペーン政策や行事の緩和で。

おばあちゃんの仕事はディレクターさんが進行を仕切ってくれます。
スポットの依頼が来て、案件が重なって、追加依頼も来て、クライアント側の変更が同時に出て頭がクラクラ。
まずは頭をカラにして、ディレクターさんに優先順位と納期を確認。スケジュールを組み直してもらいます。
そして校了をもらえてホッとしたら次の案件へ。

最初はバナーデザインがメインでしたが、最近はちょっとしたwebページのデザインも任されるようになりました。

おばあちゃんの手作りサイト作ったよ

仕事ではデザインがメインですが、コーディングも好きなのでお休みは練習でサンプルサイト作ってます。
チクチクと作業を積み重ねて、ようやくサンプルサイトが完成しました。

▶ ︎おばあちゃんの手作りサイトはこちら

コンテンツの内容はおばあちゃんの畑事情。
トップ1pと下層ページ4p、流行りのGoogle マテリアルデザインを意識して作りました。

マテリアルUIコンポーネントとCSS フレームワークbootstrap-material-designをダウンロード。

bootstrapは全体の枠組みのcontainerとrowを、コンテンツはcardを適用。細かいCSSとjsは自分で設計。

ファーストビューのスライドはフツーのだとつまらないので、ズームアップしながらフェードで切替わる仕組みを作りました。
ただページャーを連携させるのは面倒だったのでページャーをクリックしても何も起こりません。

コーディングが済んだらhtmlをphpへ組替えて、headerとfooterをインクルードしました。
そうするとnavとかのリンクが1pで完結するのでメンテが楽になります。
ただ、titleやnavのアクティブはページによって変えたいのでURLのパスを取得してページに合わせて条件分岐で切り替えています。

//パス名取得
$pass = $_SERVER['REQUEST_URI'];
//初期値書出し
for($i = 0; $i < 5; $i++){
    $act[$i] = 'nav-item';
}

if($pass === '/hatake/index.php' || $pass === '/hatake/'){
    $head_title = '草ぼうぼう サンプルサイト'; 
    $act[0] = 'nav-item active';
}
if($pass === '/hatake/works.php'){
   $head_title = 'works | 草ぼうぼう サンプルサイト';
   $act[1] = 'nav-item active';
}
if($pass === '/hatake/access.php'){
   $head_title = 'ACCESS | 草ぼうぼう サンプルサイト';
   $act[2] = 'nav-item active';
}
if($pass === '/hatake/recruit.php'){
   $head_title = 'RECRUIT | 草ぼうぼう サンプルサイト';
   $act[3] = 'nav-item active';
}
if($pass === '/hatake/contact.php'){
   $head_title = 'CONTACT | 草ぼうぼう サンプルサイト';
   $act[4] = 'nav-item active';
}

あとPhotoshopCCも使いたくてお絵描きしました。
Psは会社で毎日さわってますが、お絵描きで使うツールが全く違います。
プロ仕様のグラフィックソフトは多機能ですね。

休みはwebのコーディングやデザインの練習、お絵描きもしたいし写真も撮りたい。

畑は時間がないので草ぼうぼうの放置状態。
家事もサボってるので田舎では不良お婆ちゃんです。