今年の夏に引き続き、ノンデザイナーでフォトショ修行中の私がTechRachoのバナーを作成しました。 夏バナーを作成したときの記事はこちら。 なぜマーケティング担当者の私がデザインをやっているのか？などを解説しています。 ノンデザイナーの私がTechRachoのバナーを作成してみた 前回から成長したこと 単純にフォトショのUIに慣れてきた 前回の記事で「フォトショは感覚的に操作しづらい」とぼやいていましたが、さすがに慣れてきました。 「慣れ」を「成長」と言ってもいいかどうかは微妙ですが、個人的に「フォトショで作業をする」ことへの抵抗感が薄れてきたんです。 そもそも私は5年前までフォルダとファイルの違いも分からないほどのパソコンアレルギーだったので、古めかしいUIを見ると「これは理解しなくていいやつ」と脳が勝手に判断してしまいます（PCオンチにしか分からない感覚）。 フォトショのUIもまさに

BPS株式会社で自社商品のマーケティングを担当している飯塚です。 ノンデザイナーである私が今年の夏のTechRachoフェアのバナーを作成してみての感想や経緯について語っていこうと思います。 いわば「ノンデザイナーがデザインやフォトショ操作に四苦八苦したこと」を並べていくので、私のようにデザイン修行中の方や、初学者向けにデザインを教える方のヒントになれば嬉しいです。 当該バナー： なぜマーケターがデザインを？ 近年のマーケティング状況に詳しい方はピンとくるかもしれないのですが、最近はマーケターもデザイン知識やセンスが必要になっています。ザックリ「どうすれば売れるか考える」のがマーケターの仕事だとしたら、細分化していくと「ページの配置をどうしたら売れるか」「どんなデザインだと伝わるか」という課題に自ずと挑まなければなりません。 また、私がメインで関わっている自社商品のマーケティングでも新規バ

こんにちは。デザインチームのスギムラです！ 今年もTechRachoの夏企画の一環でデザインチームを紹介します。 （※今回もほぼ昨年記事と内容変わっていません） ありがたいことに業務が忙しくて今年はとうとう新作バナーが作れませんでした…不甲斐ない。 数年分のバナーのたくわえがあるので年表記を変えるだけで乗り越える方法に手を出しました。 デザインチームの実績紹介 デザインチームの実績は下記サイトに掲載中です。 デザインチームの実績はこちらから パンフレットやロゴデザイン、Webサイト制作など幅広く手掛けておりますのでぜひご覧ください。 こちらに掲載しきれない実績も多数ございますので、 「仕事の相談をしたいからもっと実績を知りたい！」という方はぜひ記事下部のお問い合わせからお気軽にご相談下さい。 デザインチームについて BPS内にあるデザイン案件をメインに取り扱うチームです。 現在のメンバーは

弊社が開発したデジタル教科書ビューア「超教科書」の製品紹介パンフレットを制作いたしました。 2019年度に制作した「超教科書」パンフレットの2022年度更新版になります。 2019年度版はこちら デザインのポイント 新パンフレットではデザインを一新しました。 前回のデザイン制作時はまだ超教科書サービスが本格的な開始をする前だったため、サービスサイトやサービスのイメージカラーといったものが具体的にはありませんでした。 2021年度より「超教科書クラウド」サイトがサービスを開始したため、新パンフレットではそのサイトのブルーをテーマカラーに、明るい色みやイラストをアクセントとして取り入れています。 小中学校がメインのターゲットユーザーであるので、子供向けコンテンツらしいデザインにまとめています。「つくる」「つながる」「まなぶ」の三軸でビューアを紹介する構成となっています。 こちらのパンフレットは

こんにちは。デザインチームのスギムラです！ 今年もTechRachoの夏企画の一環でデザインチームを紹介します。 （※今回もほぼ昨年記事と内容変わっていません） なお、今回も夏企画のバナーはデザインチームが作成しております。 前回までのバナーの紹介記事はこちら！ TechRachoの企画バナーのデザインとコンセプトをひっそりと紹介します デザインチームの実績紹介 デザインチームの実績は下記サイトに掲載中です。 デザインチームの実績はこちらから パンフレットやロゴデザイン、Webサイト制作など幅広く手掛けておりますのでぜひご覧ください。 こちらに掲載しきれない実績も多数ございますので、 「仕事の相談をしたいからもっと実績を知りたい！」という方はぜひ記事下部のお問い合わせからお気軽にご相談下さい。 デザインチームについて BPS内にあるデザイン案件をメインに取り扱うチームです。 現在のメンバー

こんにちは。デザインチームのスギムラです。 今回はTechRachoの夏企画でデザインチームを紹介します。 最近あまり記事をあげられてないデザインチームですが、 ぜひこれを機に「BPSにもデザインチームがあるんだなー」というのを知ってもらえると嬉しいです！ デザインチームについて BPS内にあるデザイン案件をメインに取り扱うチームです。 現在のメンバーは3名（2020年9月現在）デザイナーとエンジニアが在籍しています。 社内の開発チームと一緒に動くこともあれば、デザインチーム単独で案件を受けたりもします。 システム会社の中にあるデザインチームですので、「システム開発だけ」「デザイン制作だけ」では出来ない、「良いとこどり」のデザインができるのが強みです。 デザインチームの仕事内容 Webサイトのデザインをメインに、幅広くデザイン業務を行っています。 具体的には以下のような業務になります。 コ

ニシです。前振り長いので読み飛ばしてください。 こちらは初心者デザイナー・なんとなくデザインに興味ある人向けの記事です。 私は美大出身で、BPSに入る前は1〜2年ほどデザイン業務の経験がありました（他業務が多く、片手間程度だったのでガッツリ専門的なデザイナーではなかった）。 BPSへ入社してからは、Webデザイナーとして受託制作のデザイン業務に従事する様になりました。そこそこの経験があっても、受託でWebデザイン制作をするのはとても大変でした。 デザイナーに必要なものは、感覚・センス・発想力あたりが大きいと思うのですが、０から何かを生み出すのはかなり難しい。 しかしある程度は勉強・訓練でなんとかなったと思います。 本記事では、個人的にデザイン力をあげるためにやってよかったことなど書きます。 ⚓ 本を読む まずは本を読んで、基礎力と考え方を身に付けたのがよかったです。 読んでよかった本は、1

こんにちは、デザイナのスギヤマです。 エンジニアからデザイナに転向してもうすぐ5年らしいです。 早すぎる...自分で書いて驚きの事実... 5年という事で、数字的にも区切りも良いので、 「エンジニアからデザイナにジョブチェンジして分かったこと」と題して、 分かったことや感じたことを何回かに分けて書いて行こうと思います。 今回は「色」 色の扱い方は奥深く、そして果てがない。 「とりあえず、これを入れれば安心」と言った感じの答えが決まっている訳ではなく、その時々の見え方によって細かく調整が必要でとても難しい要素です。 デザイナに転向して、デザイン業界の最前線で戦っているデザイナと仕事をしてみて、自分の中で生じた変化に関して以下にまとめてみます。 色の種類は想像以上に多かった 突然ですが、男性と女性では見えてる色の数が違うらしいです。 一時期Twitterで話題になってましたが、男性7色。女性2

こんにちは、デザイナーのスギヤマです。 BPSの新拠点となる、ベトナム開発拠点によるWeb/Mobile開発サービスのLPを製作いたしましたので、簡単ながら紹介記事を書きました。 デザインはスギヤマ。コーディングは弊社コヤマが担当しました。 ベトナム開発拠点について BPSは開発会社として、高い品質と付加価値あるスキルと安心を武器に成長を続けています。 その一方で、創業当初と比べて支援が難しいプロジェクトも増えてきています。 その事から、より支援体制の強化と新たな選択肢の提供を目的としてベトナム開発拠点を設立いたしました。 ベトナム開発拠点に関しましては、弊社渡辺が詳しく紹介しておりますので、そちらも参照ください。 ベトナム開発拠点のご紹介 サイトについて 弊社のベトナム開発拠点は、ベトナム国内で最高学歴の人材で構成されており、日本のソフトウェア開発経験も豊富です。さらに、機械学習（AI）

こんにちはデザインチームのスギムラです。 前回の記事更新から半年近く経とうとしている事実に震えます。 これからはもうちょっと頻繁にデザイン記事更新したいです！ 記事更新に時間が空きすぎてインフィニティウォーの話がしたかったのにもう公開から2ヶ月が経っていました。悲しいです。 ニシさんの記事ですでに紹介済みですが、デザインチームのサイトがこの度リニューアルしました！ BPSデザインチームWebサイト 今回の記事ではリニューアル後のデザインチームサイトについて紹介していきます。 ちなみにリニューアル目的などは、ニシさんの記事で記載済みですので、こちらでは簡単な概要のみで。 非エンジニアのデザイナーがWordPressテーマを自作して行き詰まったポイント リニューアルの経緯 「BPSデザインチームは開発チームと一緒に仕事をすることが多かったけど、今後はデザインメインの仕事ももっと受注できるように

こんにちは、産休目前デザイナーのニシです。最後に1つ記事を書いて休みに入りたいと思います。 先日、BPSデザインチームのサイトをリニューアルしました。デザインはsugimuraさんが担当し、ライティング・コーディングは私が担当しました。 私は元々エンジニアではないのですが、WordPressテーマくらい作れるようになっておきたいと思い、修行がてらコーディングをやらせていただきました。 ということで今回は、非エンジニアがWordPressテーマを自作して行き詰まったポイントのメモ記事です。初心者向けなので注意してください。 目次 まずはサイト概要 開発について：制作フロー 開発について：行き詰まったポイント まとめ まずはサイト概要 なんでリニューアルしたの？ BPSにはデザインチームが存在しており、これまで開発＋デザイン案件の、デザイン部分を担当しておりました。 が、せっかくデザインチーム

こんにちは、デザイナーのスギヤマです。 この間の雪を降らせるJSが一部で好評だったので、引き続きJSな記事を書いてみます。 サイトを作ってるとグラフなど、インフォグラフィックスを動的に表示して、インタラクティブなコンテンツにしたいといった要望は多々あると思います。 canvas要素を使って表現したりしますが、canvasが使えない（わからない）場合もあると思います。 なので、今回はcanvasを使わずに、画像とjQueryを使って、それっぽい動きのあるグラフを作ってみます。 サンプルコード いかがでしょう？それっぽく動くグラフになっているかと思います。 今回は、CSSのoverflow:hiddenとjQueryのanimate()関数を利用しています。 以下で簡単に説明していきます。 動きをつける単位で、グラフを画像パーツに分割する グラフのデザインデータは、psdなどでもらえる場合が多

こんにちは、Webデザイナーのニシです。インフルが怖い。 今日は非エンジニアのバリバリ文系デザイナーがgitを使った苦労話とめっちゃ良かったよ！の話です。 コマンドラインや英文を見ると頭痛がするタイプなので、覚えるのは大変でした。 私はコマンドラインを諦めてSourcetreeに頼っています。さらに、弊社では元々GitLabを導入しているので、マージリクエスト（以下、MR）など便利な機能も使えます。 その話はまた後ほど。 導入は大変でしたが、結果的には大変良かったです。もうGit管理なしではhtml書けません。 Webデザイナーでもフロントエンド（html / CSS / javascript / PHP）部分をやるって人も多いと思いますが、そういった方でまだGit使ったことないよ、という人がいればぜひこの記事を読んで導入を検討してください。 ※本記事はGitやGitLabの使い方を説明す

こんにちは、webデザイナーのニシです。12月ですね。子供のプレゼントをフライングして11月中旬に発注したらすでに違うものが欲しいと言い始めてサンタさん大混乱の我が家です。困った。 今回はアドベントカレンダーということで、クリスマスっぽいデザインのポイントを分析してみたいと思います。 ちなみにこの記事はノンデザイナー・初心者デザイナー向けの内容となっております。 これを読み終わった後、きっと「あ〜クリスマスっぽいわ〜」と思えるクリスマスデザインを作れるようになっているはずです。 目次 クリスマスっぽいフォント クリスマスっぽいモチーフ クリスマスっぽい色 ターゲット層に合わせたクリスマスデザイン まとめ クリスマスっぽいフォント クリスマスっぽいフォントとはどんなフォントでしょう。Googleで画像検索をしてみます。 明朝体とセリフ体が目立ちますね。ゴシック体・サンセリフ体も出てきますが、

こんにちは、webデザイナーのニシです。情報整理の記事を書いているのに机の上が汚かったので、今急いで片付けました。 前回は「Webデザインのための情報整理術：情報過多編」を書きました。 今回は「情報過少編」です。 クライアントからもらった情報があまりに少ない時、途方に暮れた経験ありませんか？私はあります。 そういう時どう切り抜けたか、を自分のメモがてらご紹介します。 目次 なければ作る 分解して再構築 文章を足す デザインでなんとかする まとめ なければ作る 分解して再構築 例えば以下のような文章（117文字）があったとします。 このサービスはコンシューマ向けクラウドストレージサービスです。費用は無料プラン・有料プランがあります。無料プランは10GB、有料プランは100GBまで利用可能。自動アカウント発行でいますぐ使えます。強固なセキュリティで情報を守ります。 我々webデザイナーは、この

こんにちは。BPSデザインチームのスギムラです。 最近HiGH&LOWのシリーズ全部見ました。すぐケンカする治安が悪いドラマを見て育った世代には魂に訴えかけるものがあります。最近公開していたTHE MOVIE 2 END OF SKYは日本映画でこんなに人と車が吹っ飛ぶんだ！？と感動するほどアクションすごい、画面作りもかっこいい、潤沢な資金を感じる、まさにスーパーエンターテイメント。11/11に新作も公開です。 さて、本日はデザインチームのスギムラが制作した、トライプラス新中野校のLPとチラシのデザインについてご紹介します。 LPの概要 サイト名：トライプラス新中野校 サイト概要：げんきだま株式会社が運営しているトライプラス新中野校の生徒募集LP LPの構成・デザインはスギムラ、コーディングはデザインチームのニシが担当しております。 本記事は上記サイトと合わせてお読みください。 トライプラ

2017.11.02 【制作実績】EPUBビューア「超縦書」Windows版 無料公開ページデザイン。コンセプト設計、こだわり、注意点など デザイナーのスギヤマです。 弊社製品であります、EPUBビューア「超縦書」Windows版 無料公開ページのデザイン制作を担当させていただきましたので、今回も簡単にご紹介の記事を書かせていただきます。 超縦書は、弊社が誇る「EPUBビューア」です。 文字通り「縦書き表示に強い」製品なので、縦書き表現を部分的に用いて、そのことをアピールできるようなサイトを目指し、制作を行いました。 ビューアという商材ですので、「落ち着いて」「文章が読める」をコンセプトに、 まるで、どこかで読み物を読んでいる様な「文字の読みやすさ」、文章に集中できる「シンプルさ」に気を使いながらデザインを行いました。 EPUBビューア「超縦書」Windows版 無料公開ページはこちら 1

こんにちは、webデザイナーのニシです。箱根に今すぐ行きたい。 2017年はたくさんLPを作ってきました。ワイヤーフレーム（以下、WF）から作ることも多く、その時に情報整理って大事だなと痛感しました。 今回は、情報が多すぎてWFが爆発した時に実践した情報整理術を自分のメモがてらご紹介します。 目次 1.グルーピングする 2.強弱をつける 3.段落・見出しをつける（長文の場合） 4.まとめ 1.グルーピングする サイトに掲載する情報が、あまりにも多すぎてWFがまとまらない、と言う場合は、まずは情報をグルーピングして整理します。 まとめられるものはまとめて1つのカテゴリにすると、少し整理されてきます。 カテゴリ分けできないと思っても、とりあえず無理やり分けてみましょう。 以下はLPの構成を例としたものです。 「低価格」は「価格について」にグルーピングされそうなところですが、この例ではLPの構成

こんにちは。Webデザイナーのニシです。最近は納豆の免疫力アップ効果に注目しています。 先日、漫画翻訳のナンバリング作業を効率化するWebサービス「Numba Lumba」のLPを作成しました。 担当したのは、以下の3点です。 構成（WF作成） ライティング（文章作成） webデザイン 今回はLPデザインのポイントをご紹介します。 題材紹介 サービス名：Numba Lumba (ナンバルンバ) LP概要：BPSが開発した漫画翻訳のナンバリング作業を最大効率化するウェブツールの紹介LP 以前、弊社代表の渡辺がNumba Lumbaのシステム紹介をさせていただいております。 こちらも合わせてご覧ください！ 漫画翻訳のナンバリング作業時間を大幅に短縮するウェブツール、ようやく紹介資料ができました 1. ウェブツールとして清潔感のあるデザイン 漫画というと子供っぽいイメージがありますが、大人も大勢

初めまして、入社２年目のニシです。 漫画が好きなアラサーです。すぐ本棚がいっぱいになるので定期的に売っぱらっています。人生を変えた漫画はプラネテスです。アニメは見ていません。 今回は、Webデザイナーがよく使うデザインテクニックを４つご紹介します。 「ノンデザイナーでもいい感じにできるデザインテクニック」とも言います。 ぜひこれを読んで活用してください。 目次 英語表記を加える 罫線でアクセントをつける アイコンを加える 写真を使う 1. 英語表記を加える 定番ですね。見出しとかロゴとか困ったら添えちゃう。 ありふれたデザインにならないようにするのが難しいけど、やっぱり英文かっこいい。 と、頻繁に使われるテクニックです。 たとえば以下のような感じ。 文言を置いただけの見出し（左）に英文を添えると、土台が出来て安定感が出ますね（右）。色やフォントや配置にも手を加えるとさらによさそう。 綴りを