見出し画像

【わたしのつくりかた】プログラミングスクールのDMをデザインした話

プログラミングスクール「サークルアラウンド」さんのスクール案内のDMを制作しました。

今回は、クライアントさんがデザインのことも理解がある方だったので、「情報の整理」と「ビジュアルデザイン」と過程を大きく2つに分けて進めました。

その1文章ベースで情報の整理とレイアウトをする

ご依頼者さんが、掲載したい文章や写真といった情報を丁寧にまとめて私に投げてくれました。まず、すべての情報をご要望のA4両面に収めてみます。

デザインの四原則に従って情報を並べていきます。

整列・・・余白や文字の頭など揃えます。

近接・・・似ている情報を同じ枠内、近くにまとめていきます。

反復・・・主な4つのコースの見せ方は、トレーニング名の文字やQRコードを同じ位置に配置することで、繰り返したレイアウトにします。(見る人が、同じカテゴリー内で4つのコースの話をしていることがパッと見てわかるように)

コントラスト・・・この時点では、明度や彩度の情報はあまりないので、A4おもて面のメインビジュアルエリアに面積を大きめにとり、パッと見で目立つように。というところだけ意識しています。

私は、お客さんと「どうしてそういうレイアウトにしたか」話し合いができるように、デザインの四原則を意識して制作しています。

これをベースに「このコースがメジャーなので、大きく見せたい」とか「こういう写真を使いたい」といったご要望を組み込んで再調整していきました。

その2苦しくて楽しいデザインテイストのパターン出し

レイアウトがだいたい決まったら、ここから写真・色・イラストや図といったすべてのデザイン要素を使ってビジュアルをつくっていきました。

ここからはロジックよりも、見た目の完成度や気持ち良さを重視して決めていきます。サークルアラウンドさんのコーポレートカラーである青色を全面に出し、ぱっと見で綺麗ですっきりした印象を出し、印象づけたいとご提案をさせていただきました。

上記のデザイン、微妙な違いなので説明すると、

A案・・・青い面積を多くとり、カラーで印象付ける案

B案・・・情報部分は色付きのラインを活かしてメインビジュアルとコントラストをつける案

C案・・・グレーを取り入れて、かっちりした印象を出す案

といった感じで3パターン作っています。

このフェーズで大切なのは、言葉にできるコンセプトと、ビジュアルの完成度が両立できているか。というところになります。そして最終的に優先するのはビジュアルの完成度です。自分は各パターン作ってみて、気持ちの良い見た目になるものを優先しています。B,C案は実際に作ってみると、全体のカラーがガチャガチャしてきたので、60%くらい作ったくらいで判断タイム。A案に確定して細かく詰めていきます。

その3 細部もやっとこねこねするタイム

あとは細かいところまで気にして完成度をあげます。今回は、IT系サービスということで、WEBライクな細めの斜体フォントに挑戦してみました。また細かな言い回しなど質問しながらコンテンツ自体も最終調整をしました。

こんな感じで完成しました〜!(価格やコース内容は掲載時と変わることがあります。)

予想以上にCMYKで綺麗な青いグラデーションが再現できてて、やばいと思った。Ogasawaraさん、実物支給ありがとうございます〜!

※デザイナーさんが社内にいない場合は、ラクスルさんのアカウントを作成していただき、データ入稿をこちらでやったりします。(ボタン1発で過去の注文から増刷ができるので、デザイナーに頼まなくても大丈夫〜!良心価格なところもいいところ。デメリットは発注ごとに色がブレがちなところです。)

さてせっかくなので今回は、ご依頼いただいたサークルアラウンド社の小笠原さんに、どんな特徴のあるプログラミングスクールなのか、インタビューをしてきました!(インタビューしてみたかったの!!!)

サークルアラウンド社で講師やカリキュラム作成をされているOgasawaraさん。新卒でベンチャー企業に就職し、3年間プログラマーとして現場でサービス開発に携わります。その後、独立してフリーランスに。現在はサークルアラウンド社でトレーニング・受託制作などプログラミングに関わる幅広いお仕事をされています。

あとお寺の坊主です。(見た目は全然坊主じゃないので、いつ物理的な坊主になるのか私は心待ちにしているところです。)

Ogasawaraさん、今年はなんとJavaScriptの書籍を執筆されています。私も買った。

Manaty: プログラマーを育成するサービスは近年たくさんあるように見受けますが、サークルアラウンド社のトレーニングにはどんな特徴がありますか?

Ogasawara: ひとつは、「プログラマーとして考える力を身につけてもらうこと」を大切にトレーニングをしています。何か問題が起こったときに、どうやったらその問題を解決できるか、自分で考える力を伸ばさないと、スクールを卒業しても、本当の意味で自分一人で開発できるようにはならないからです。

もうひとつは、「長期的に見て、プログラミングを学ぶ時間を短縮するカリキュラムを提供すること」ことです。独学でプログラミングを学ぶとき、今これが必要なのか判断がつかず迷ったり、実際に現場で活かすとなると、抜け漏れがあるものです。サークルアラウンドの講師は全員が現役のプログラマーなので、生徒さんの理解度に合わせたレクチャーや、現場で活用できるリアルなアドバイスができるところが魅力だと思っています。

Manaty: 現役プログラマーに学べるのはとても嬉しいですね!小笠原さんは現在28歳とお若いですが、どうして講師業を?(インタビュー時)

Ogasawara:「プログラマーの成長を本気で考えてサポートしてくれる場所が欲しい」と思ったからですね。

初めてプログラマーとして会社に入った時、エンジニアが僕だけだったので、インフラからフロントエンドまでを一人でやっていました。精神的には強くなりましたが、効率的に成長できたか。というと、遠回りしたと感じることも多かったんです。わからない部分を局所的に聞くことができ、現場で通用するレベルまでスキルアップできる場所があればいいのに。と思っていました。それを形にしている感じです。

Manaty: デザイナーとして働き始めた頃、同じように思い、いろんなレッスンを受けていたのでわかります。では、実際のスクールはどんな雰囲気か教えてください。

20代後半から30代前半の生徒さんが多いですね。卒業後は、半数以上の方が、他業種からエンジニアに就職・転職しています。残り半数は、もともとプログラマーの生徒さんですね。よりスキルアップして現場に戻っていく感じです。

自力で問題を解決したいという意欲的な生徒さんが多いと思います。生徒さんからの突然の質問に答える形で、講師が突然ミニレクチャーを始めたりも。アットホームな雰囲気だと思います。あとマンツーマントレーニングなので、技術面での会話量は圧倒的に多いかと思います。

Manaty: ふええそれ大事〜!では最後に、通ってみたいと思っている方に一言お願いします!

Ogasawara: サークルアラウンド社のトレーニングは、答えや、やり方を教えるというより、自力で解決できる・現場で活躍するために必要なスキルを習得することを目標としています。もし合いそうだな。と思ったらぜひ一度いらしてください。

ちょっと合わないかなと思った方も、世の中にはたくさんのスクールがありますので、ぜひ自分にあった方法でプログラミングを学んでみてください。

↑卒業生のリアルな声はこちらより。

講師としても、同じものづくりをされている方としても、すごく頼り甲斐のある方です。ぜひプログラマーになりたいと思っている方は、ご相談してみてください。↓

サークルアラウンドさん☟

OgasawaraさんTwitter☟

それでは、また何かものをつくったらまとめてみます〜。(・∀・)ノシ

将来は、小さな連載を数本抱えているおばあちゃんになりたいです。