皆さま、どうも！
プロフェッショナルエフェクト 人事 兼 広報担当のサイトーです⛄️

今回は【社長からの学びシリーズ】の投稿です📝

◆ What is 社長からの学びシリーズ？

当社の社長は、メインの社長業をしながらも
自ら現場にも入り、いつも先頭に立って全員を引っ張ってくれる人望厚い人。
そんな社長から学んできたことは数多く、書き出していたらキリがないのですが、
特に最近得られた学びを、したためていくシリーズです。

サイトーのメモ感覚に書いていきますが、
この投稿を通して、当社社長の考え方や会社の雰囲気が伝わればいいなと思います🌸
何より、これをきっかけに当社に興味を持ち、エントリーいただけると嬉しいです😊

では、いってみましょう☝️

📖 きょうの学び：Webデザインの現場で使われる言葉

先日、当社のLP（ランディングページ）のリニューアルに関する打ち合わせに参加していたとき、

Webサイトが出来上がるまでには、設計段階だけでも3種類の成果物がある

という話を聞きました。

「なんと・・・！設計段階だけで3種類・・・！？
　手書きやスライド資料で認識合わせするだけではないんだ・・・」
と感じたのですが、
それぞれの成果物の話を聞いてみると、
「なるほど。それはすべて大事だ」と思えるものでした。

その3種類の成果物とは、

・ワイヤーフレーム

・カンプ

・スケルトン

というものです。

Webデザインの現場では、
① ワイヤーフレーム
② カンプ
③ スケルトン
の順番でデザインを確認しながら、具体化していくそうです☝️

では、それぞれどんな役割を果たすのか？
ひとつずつまとめてみました📝

🎨 ワイヤーフレーム
￣￣￣￣￣￣￣￣￣￣￣￣￣

　色すら入っていない段階のもの。
　主にボタンやアイコンの配置を決める☝️

🎨 カンプ
￣￣￣￣￣￣￣￣￣￣￣￣￣

　色やボタン等の配置、アイコンが入った状態で、
　特定の画面サイズで表現したときの絵。
　色や配置を確認するため、フォトショやFigmaで作る☝️

🎨 スケルトン
￣￣￣￣￣￣￣￣￣￣￣￣￣

　HTMLで作られたもの。
　画面遷移を伴うような動作は組み込まれていない。
　様々なサイズのブラウザ、スマホで表示したときにどのような画面に見えるかを確認するもの。

これらが設計段階で作る3種類の成果物です！

Webデザインの現場のことは、なんとなくイメージしていたものの、
実際にこういった成果物があることを初めて知りました🤔
Webサイト作るにも、いろーーんな段階があるんですね！

以上がきょうの学びです😊
「これってどうなんだろう？」「あれってこういうことかな？」
と思ったときは、また社長に聞いてみようと思います！

お読みいただき、ありがとうございました⭐️