見出し画像

アプリ模写100本ノックでUIデザインを学びました!

7/1(土)に開催されたフロントエンドスクエアの様子をお届けします🤗
勉強コミュニティに興味ある方は、ぜひこの記事で雰囲気を感じてみてください!

🎉フロントエンドスクエアとは?

フロントエンドスクエアは、エンジニアやデザイナーやPMやディレクターなどデジタルサービスの開発に携わっている人やその職種に就きたい学生・異業種の方が参加し、各自がその時にやりたい好きな勉強をするコミュニティです!

※エンジニアやデザイナーなどIT業界で働く(働きたい)人向けのテーマを設けることもあります。興味があるテーマがあれば、マンハッタンコード社員と一緒に勉強しましょう!

🎪会場の雰囲気と概要

コワーキングスペースを貸し切っているので、作業に集中しやすい&おしゃべりしやすいです!Wi-Fiと電源が完備されています♪
各々好きなことを喋ったり勉強できます。
14:00-20:00の間は入退室自由なので、好きな時間にふらっと遊びに行けます。
マンハッタンコード社員や参加者さんと一緒に楽しく会話をしたり勉強をしましょう♪

4~8人くらいは余裕で入れます!

な、なんと!
コーヒーとお菓子はおかわり自由です。
コーヒーは豆にこだわっていて、参加者さんから美味しいと好評なんです。

家だと作業が捗らない...そんな時はカフェ代わりにフロントエンドスクエアで勉強するのもおすすめです◎

暑い時期はアイスコーヒーをご用意しております

📍会場情報

いいオフィス 神田小川町

🧑‍💻こんなことしました

📱アプリ模写100本ノックをやってみる

先々週のフロントエンドスクエアに参加していた人達で「これやってみたいね〜」と言っていたものをついに今回やってみました!
その名も「アプリ模写100本ノック」です。

詳しくはこちら↓↓

「アプリ模写100本ノック」は、アプリの骨格のみを紙とペンで高速で模写します。
そのアプリのコア体験について制作者の意図を考察し、気づきを通してデザインパターンの引き出しを広げられる優れた模写方法なんです!
(考えてくださったMiwa Kuramitsuさんに感謝🙏)

📝手順と感想

まずは模写したいアプリを選びます。
今回はiPhone純正の時計アプリにしました。

その後、沢山操作して、主要3画面と思われるものを決め、気になったことをメモします。これを10分で行います!

次に、手書きでUIを模写します。これも10分で行います!
書き込みの解像度はワイヤーフレームレベルで良いそうです。

書いていくと色々発見があります

模写ができたら、余白に気付いたことを書き込んでいきます。
こちらも10分で行います!

思いつくまま自由に書き込みます

これでアプリ模写は終了!
みんなが模写したものを並べて、それぞれの気付きをシェアしました。

人によって気付きポイントが全然違うのが面白かったです!
例えば、色の使い分けに着目している人もいれば、画面遷移に着目している人もいたり。

自分とは全く違う観点の気付きを得たので、明日からのUIデザインに活かせそうな気がします♪

フロントエンドスクエアでは、このような面白い企画を突発的に行うこともあります!
一人ではなくみんなでやることで学べることも沢山あります。
何かやってみたいことがある方は、ぜひフロントエンドスクエアを使ってみんなで勉強しましょう♪

💁‍♀️次回予告

この記事を読んで興味を持ってくださった方は、ぜひ次回のフロントエンドスクエアに遊びに来てください!
年齢や職業問わず、誰でも参加OKです!
次回に関してはテーマは特にありませんので、各自好きなことを勉強しましょう♪
詳細やお申し込みは以下connpassページをご覧ください。

📣ご案内情報

1️⃣正社員採用について

当イベントの主催会社であるマンハッタンコードは、2023年9月までに正社員を4名募集します。
会社の仕組みづくりや事業戦略をやりたい!という方からのご連絡をお待ちしております。
詳しくは下記ページをご覧ください!

2️⃣3職種のアルバイト採用について

正社員だけでなく、エンジニア・デザイナー・マーケターのアルバイトも募集しています。
時給は1,500円からです。
フロントエンドのプロたちと一緒に仕事をしてみたい!という方からのご連絡をお待ちしております。
詳しくは下記ページをご覧ください!

3️⃣フロントエンドスクエアのイベントスタッフも募集中

詳細はこちら
毎週土曜日に開催しているので、出勤したい日を教えていただければOKです。特別必要なものはありません。
興味のある方は弊社社員またはJ.J.のTwitter DMまでご連絡ください!
実際に遊びにきていただいてもOKです!

4️⃣マンハッタンコード公式TwitterとInstagram

Twitter

マンハッタンコードの最新情報をお届けしています。
マンハッタンコード公式Twitter

Instagram

マンハッタンコードではどんな仕事をしているか?やフロントエンドに関するお役立ち情報を投稿しています。
マンハッタンコード公式Instagram

いいなと思ったら応援しよう!