教室掲示・教具用PDF掲載サイト 

教室掲示・教具用PDF掲載サイト

サイトの目的:

掲示物や教具制作業務の簡略化

概要:

教室掲示や教具などの例年使用するであろうものを単元ごとや目的別にまとめてPDFでダウンロード可能な場所にする。

システムの方式・構成:

印刷の関係上WEBブラウザからのアクセスを想定。仮想サーバ上に教具データを保存して管理する。※要検討

用語定義:

教具・・・今後は教室掲示もしくは授業内で使用するものを今回は教具とあらわす。

 

業務用件:

・それぞれの自治体ごとに教具のPDFデータを公開しているがサイト自体が古くリンク切れだったりレイアウトが見づらくデータそのものが多くそろっていないという問題点がある。

→目的と必要なものがスムーズにつながるような導線を意識したサイト作り。要望用のフォーラム・有償作成フォーラムを作成して素材の更新を継続的に行う。

 

・授業案やワークシートに対して教室掲示や教具の配布などは決して多くないために結局は教員がそれぞれ自作して時間を食われている。

→学校指導要領に則った教具制作を行い1年を通してサイトが業務を簡略化できるように単元を網羅した素材制作を行う。

 

・新卒の教員は、周りやまた聞きの情報をもとに手探りで作成しているため1年目の負担が大きくなっている。ひいてはすぐにやめる教員の原因の一端になっているかも。

→もっともサイトを広めるパターンとしては新人教育の一環として紹介されること。そういった新任の教員向けの特集ページのようにひとまとめセットのようなものをトップに持ってくる。

 

フロー:

トップページにアクセス→新任教員か学年素材、汎用素材ボタン→

①新任教員の場合は素材のリスト一覧とその使用方法。その横に個別ダウンロードボタン。右下にフロートされた一括ダウンロードボタンを配置。直接ダウンロードできるようにする

②学年素材ボタンの先でさらに個別の学年ボタン→教科を選択→その学年ごとの単元を小見出しにした小さな枠タイプのタブを配置して概略をダウンロードボタンを下に配置→タブをクリックすると新任教員と同様リストとその説明・個別ダウンロードとまとめてダウンロードのボタン

③汎用素材は図形やピクトグラムごとに分類。小さな枠のタブごとに配置→クリックすると上記同様の詳細ページ

 

利用者:

主に小学校教員。新任教員など現場でのことを想定しているが家庭や民間児童施設などでも利用される可能性がある。

 

規模:

利用者数は最大100名/月程度を想定し、サーバーの維持費が10,000円を超える場合は教育系IT企業に譲渡を検討する。

 

画面:

・トップページ

 ・新任教員向け

  ・素材詳細ダウンロードページ

 ・学年別

  ・学年(1~6年)

   ・教科

    ・単元

     ・素材詳細ダウンロードページ

 ・汎用素材

  ・汎用素材種類

   ・素材詳細ダウンロードページ

・フォーラム

 ・素材リクエス

 ・有償依頼

 ・お問合せ

 

データフロー:

AWSを基本的に用いるが未定。

イラストの描き方忘れてダチョウになったであろう自分のためのメモ

イラストの描き方手順

 

1.アイディア

 

・キャラクターの性格・状況・小物のチョイス・与えたい印象を書きだす。

・オリジナルキャラの場合は簡単にデザインを決めておく。

・おおよそ与えたい印象と遠景・中景・近景の配置を図形的・曲線的に書く。

・あくまで構図案なので1200px程度の低解像度でがしがし描く。

・構図の中に登場するであろう小物や固有名詞のあるものの資料を"Pinterest"で集めて付箋に貼っていく。

・使いたい色がぶれないように"Coolors"で出力しておく。

・明暗のイメージのためにモノクロでH0S0~90V0で目安を描く。

 

2.3Dによるラフ補助制作

 

・1で考えられた小物や背景の備品などの生物を”Blender”でローポリで制作する。

・ローポリはテクスチャで細部をつめる。

’※候補・・・髪の毛を制作?服も”SimplyCloth”使えば作れるかも(手間かかりすぎ?)

髪の毛のモデルは基本的なものを作っておりて”MagicPoser”のようにおくのもあり

・”デザインドール”でキャラクターを作りファイルにキャラ名で保存しておく。

・上記のファイルを”Blender”上で配置して”Twinmotion”で光を調整する。

 

3.ラフ制作から線画作業

 

・キャンパスサイズはA4の350dpiで作業はその二倍。

・キャラ部分は特に3D制作したものをそのまま使うと違和感が出るので改めてラフを描くイメージ。

・キャラの線画をシルエットを描くように7px~25pxで描く。詳細の書き込みは1px~15pxで描く。

・アイラインは眼球に沿った部分のシルエットを意識して眼球の曲線を損なわないようにする。

・瞳は0の形を常に意識して横につぶれたり意味なく三白眼にならないようにする。

・アイラインの太さはまつ毛の省略形。角度によってつく変化はそこを意識する。

・顔のパーツの配置は猫を意識する。極端に言うと丸みを帯びた猪木

 

 

4.彩色準備

 

・3Dのものを事前に生成していたモノクロHSVに合わせてSを調整する。

・3Dラフの色をスポイトしながらレタッチしていく。

・キャラはスポットを意識して大まかに着色して3D感を消していく。

・キャラだけはベタ塗りつぶすように意識する。

・遠景であればあるほどグラデとシルエットで塗りつぶすようにする。

 

5.彩色作業

 

・3Dラフから全体のシャドウの濃さを見て乗算の落ち影を決める。大体H±5S10~30V10~30で考える。

・反射光も3Dラフを考慮するがSは5~10ぐらいが目安。明確に反射光源がある場合はその限りではない。

・固有影は落ち影のVを5~10程度に範囲変更するイメージ。

・塗り方は落ち影を先につけていく。

・その落ち影を透明部分をロックした状態で反射光をグラデーションで入れていく。

・漫画だとペン先の強弱で陰影をつけるところは落ち影のSV×2を想定していれる。

・グラデーションの中の凹凸を落ち影でつけていく。

・光が当たっっている部分の凹凸は固有影を使ってつけていく。

・光の部分は質感の要なのでスクリーンや加算(発光)でつけていく。

・光のつけ方のイメージは主に面で塗る、もしくは曲面のテカリをつける。

・光と影の間の透け感は素材によるが、肌は奥底の血色が出ている。

・皮と骨が近いところは光に関係なく血色が見えている。

・最終的なイメージの調整はオーバーレイで行う。場合によっては3Dラフを素材にするのもあり。

・最終は通常レイヤーで加筆して調整する。

 

 

6.完成

 

・完成

 

 

 

WEBサイトに必要なのは共通のストレスの排除ではという話

サイトのタイトル文字押してホームに戻らないと窓にPCを投げそうになる

辛いとか甘いと同じようにストレスもなんとなく共通にあると思う。

建付けの悪い扉や異臭のするゴミ袋とか。

主に私はWEBサイトのタイトル文字をクリックした際にホームに戻らないサイトに世界中のありったけの怒りをぶつけたくなる。

普通にむかついただけで済ませれば良いと思うのだけどこういうことをメモって行くことによってストレスフリーのデザインができると思うので少しづつでもメモって行きたい。

 

・タイトル文字がクリックできないORホームに戻らない

・どの機能が何の役割を担っているかわからないレイアウト

・おしゃれな動的機能を組み込みすぎてやたら重いサイト

・同ページ内のタブのように仕込まれる外部サイトリンク

・モノトーンすぎて導線が見えないカラーリング

・全部にハイパーリンク仕込んでいて境界がわからない本文

 

 

私のことが大大大大大好きな100人の御社

       そんなわけはない現実へようこそ。

                                                                                                                                  

 

 AIに仕事を奪われ続けて久しい人類はなくした小物類のごとくその記憶を失っているのだけど、なんとなく仕事を奪ってくる悪いやつなんだこいつはって記憶だけはあるので多分最終話近くで覚醒する。

 別に覚醒もしていないしAIに何も奪われちゃいないけど、実際問題社会インフラ周りやエンタメ周りでまともなWEB環境に恵まれずにまともなパフォーマンスを発揮できていないのってもったいないと思っている。

勝手に思っているわけでもなく当事者たちもWEBサービスの希望や開発願望はあるんだけど如何せん門外漢の集まりで外注するとなぜかさらに門外漢が派遣されてくるのが現状。(ICT支援員とか)圧倒的惨状。

 

 

                                                             

 

 実際こういったインターネット関連事業におけるWEBデザインやコーディングは私もその門外漢の一人なわけだけど、このインターネット老人会のプライドをもってしてこの世界に潜りにきた無資格ダイバーというわけなのだ。そのまま沈んだ場合は自己責任。

 

 とどのつまり世間に知識や情報、様々な専門家や技術があふれているであろう昨今の情報格差や需要と供給のミスマッチはシームレスに全環境を把握して動ける技術者の存在がいないことにあるのでその第一人者になるかぁという主人公マインドによるもの。

 

 

 

 

                                                               

 

 結局そのうえではてなに入社したいなんて厚かましい展望を書いているのはというと次の2点にある。

  • 質の良い環境とコミュニケーションが盛んな会社でチーム制作をしたいという思いがあるから。そもそも自分の考える開発の規模が個人では無駄に時間がかかって現実的ではないのと、教育などの社会インフラに個人製作のものがぶち込まれる未来なんてあまりにも存在しなくてユーハバッハが苦笑するレベル。
  • あとは完全にスポーツの理論。優れた環境と強いチームメイトに囲まれた選手はトッププロになれるかは置いておいてその業界における高水準を自然と身に着けることができるというもの。

 

 

 

 

      結論:はてなに入社できるまで進化していきたい。

 

 

 

                                             

 

 

 

 

 

 長々と書いたこれは自戒となり呪縛となるのだろうけど人間手綱を握らないと怠惰な方向に転がっていくことは目に見えて明らかなので全世界にこの呪いを振りまいておこうと思う。

 

 

 

 

 

 

 

 

海外のパスタの名称のどぎつさにいつもテレビで聞いてびくっとなる。

盗人とか貧乏人とか言うなよ。もっともちふわパスタとかにしろ。