ワークショップ「構図基礎」に参加してきました!

こんにちは、デザイナーの栗原です。
日曜日に、デザインのワークショップに参加してきました!

参加した講座

参加したのは、会社の近くの御茶ノ水美術学院で開催されているartgym(大人のためのアートスクール)の講座。
デザインだけでなく、デッサンや立体作品のワークショップなど、アート全般について幅広く開催されているようです。

今回は、仕事に活かすために「構図基礎」というワークショップに参加してきました。
参加者は10名ほど。実際にポスターのレイアウトを考えて公表をしてもらう、という内容でした。

学んだ内容


 

◼️意図を明確にする

まず、意図を明確にすることが大切、ということが強調されていました。
ペンをとる前に、誰に向けて、どんな情報にポイントを絞って伝えたいのか、をはっきりさせます。
 

◼️配置のテクニックを用いながらラフを描く

意図が固まったらラフに起こします。
このとき、配置のテクニックを使うと、「意図」を効果的に伝えることができます。

例えば、「S字構図」を用いるとスピード感を演出できたり、「左右対称構図」を用いると2つのことを並列に見せることができると教えていただきました。
見せていただいたチラシの例でも、効果的にレイアウトされていて、オリンピックの広告からは緊張感、バレーボールの広告からはチームの一体感などを感じ取ることができました。
 

◼️グリッドを引いて配置を調整する

ラフが固まったら、グリッドを引いて調整をしていきます。
グリッドの間隔をあえて等間隔ではなくしたり、グリッドから要素を少しずらして配置したりすると、遊びや動きが生まれて、また違った表現ができることを発見しました。

また、実際のチラシにグリッドを引いてみる、という時間があり、
素敵なデザインは、きちんとグリッドに揃えられているからこそ、奇抜なデザインであっても、見る人に安心感を与えることができると知りました。

まとめ

  • 「どのような意図を伝えたいか」がとても大切で、それをきちんとターゲットに伝えるために、配置のテクニックが有効。
  • 奇抜なデザインをするときも、揃える所を揃えることで、全体にまとまり感をもたせたり、情報に説得力を与えることができる。

おまけ

メディカルデザインでは、このようなワークショップの参加費用や、本の購入代など、仕事に関連する勉強については、会社が金額を補助してくれます◎
自主的にどんどん勉強して、実力を身に付けたい方には、ぴったりな職場です。

▼▼メディカルデザイン デザイナー募集要項はこちら▼▼
https://www.medical-design.co.jp/recruit/category/designer.html

ぜひ、ご応募をお待ちしております!

ワークショップに行ってきました!

はじめてのワークショップ

こんにちは! 前回の投稿から引きつづき、また呉が書かせていただきます。

 

今回は、御茶の水美術学院の大人向けアートスクール「artgym」のワークショップに行ってきました!

「デザインに役立つ!構図基礎-グラフィック篇-」というワークショップだったのですが、デザインの業務にまだまだつまづいてしまう私にはピッタリで、
ちょうどこういうのを学びたいと思っていたため、緊張しながらもワクワクしつつ当日を迎えました。

 

ワークショップに行くこと自体が初めてで、ましてやデザイン系ですから、
どういった人たちがいて、どういった雰囲気が進めるのだろうかと不安ではあったのですが、

行ってみれば講師の方もとても話しやすく気さくな方で、とても穏やかな雰囲気のワークショップでした。

ワークショップ内容

 

ワークショップの内容はというと、講義のようにただ講師の方のお話を聞くだけではなく、

実際に自分で構図を考えながらデザインを作ったり、また既存のチラシなどのデザインを分析するなど、
手を動かしたり見て学んだり退屈しないものでした。

真ん中にモチーフがくる日の丸構図や、縦横を3分割する3分割構図など、構図にはいくつかのパターンがあるというテクニック面も学べましたが、

今回のワークショップで一番に学んだことは、「構図とは”意図”を持って配置すること」でした。

 

既存のチラシを比較して、このデザインの制作者は何を意図してこういったデザインにしたのかと考えたとき、
例えば東京五輪のチラシならスポーツらしい疾走感を持たせたり、子ども向けの音楽会のチラシなら子どもの興味を引くようなデザインにしたりと、
どのデザインにもそのデザインになった「意図」があることに気づかされました。

 

当たり前のことのように聞こえますが、私にはちょうど心当たりのあることがありました。

というのも、つい先日、制作したバナーに対して「クリックできる感が少ない」という指摘を受けてしまうことがありました。

改めて作ったバナーをみると確かに、それはただの一枚のデザインであって、それがクリックできるものであると示す要素が少ないことに気づかされました。

学んだことを受けて考えてみれば、「クリックしてほしいという”意図”」がないままバナーを作ってしまっていたのです。

 

気をつけているつもりではあったのですが…デザインって難しいんだなあと改めて感じると同時に、
これを機に、次からデザインを作るときはちゃんとそういった意図を意識して作ろうと思います。

 

思った以上に実りのあるワークショップだったので、また機会があれば行きたいですね!
それでは!

新入社員研修にいってきました!

はじめまして

はじめまして。この春に新卒としてメディカルデザインに入社した呉です。

入社して数週間が経ち、少しずつ会社という環境にも慣れてきましたが、まだまだ仕事はつまずきながらという感じです。

 

そんななか、先日はマイナビの新入社員研修に行かせていただきました。

文字通り新入社員が受ける研修なので、お辞儀の角度だとかそういったことを学ぶのだろうかと思いながら当日を迎えました。
実際はというとまったくそういった内容ではなく、「会社で役立つ考え方やスキルを身につける」ための研修というような内容でした。

 

研修中につかったファイル

研修内容

ムビケーションスタイルという、あまり聞き慣れない研修スタイルなのですが、映像で映されるストーリーに沿い、
そのストーリーの主人公である出向社員として、そして講師の方を上司として、指示を受けたりお客さんから依頼を受けたりといった、いくつかのシチュエーションを疑似体験しました。

 

とえば実際にあったのは、上司からアンケートの集計をするように指示を受けた場面です。
アンケート用紙を渡され、いざ集計しようと思っても合計数だけ出せばいいのか、平均値を出すのかなどがわからず、
悩んだ結果“とりあえず”合計数だけ出しそれを上司に提出してしまいました。

するとやり方が違う、わからなかったならなぜ質問に来ないのかと叱られるといったことがありました。
上司役の講師の方に実際に叱られました。
疑似体験とはいえやはり叱られると少し凹みました。

このシチュエーションで学ぶべき内容は「教えてもらうのを待つのではなく、
わからなければ積極的に自分から質問をすること」であったことをそのあと知り、このことを身を以て学ばされたのかと気づきました。
確かに振り返ってみても、仕事に関してわからないことがあったとき、質問せず自己完結させてしまおうとすることがあったことを思い出しました。

 

そのあとも中間報告が足りないと度々叱られることがありました。
これに関しても、振り返ると中間報告をさぼっていたことに気づかされました。
会社に戻ったらちゃんと直そうと思いました。
思うだけでは意味がないので、実践中です。

 

資料として使用した、架空の会社のパンフレット

 

他にも報告書の書き方や、プレゼンの仕方も学びました。

「会社で役立つ考え方やスキルを身につける」ための研修とは、字面だけみるとよくわからない内容ですが、
実際に受けてみると確かにお辞儀の角度よりもちゃんと会社で役立つであろうことを学べたように思います。

 

今後は学んだことを活かしながら頑張っていこうと思います。

【ランチ会だより番外編】屋上BBQ★

こんにちは!ランチ会係です。
先週の金夜に開催されたBBQの様子をご報告します♪

毎年恒例の夏BBQ!去年はできなかったので久しぶりの開催でした!社長が張り切っていろいろ用意してくれました〜

DSC_3549

エプロンとグローブ装備で準備万全の社長★

DSC_3578

DSC_3570

一生懸命火起こしする社長とその様子を腕組んで眺める社員。。。

DSC_3581

西谷さんも火起こし参戦!!火力上がってきました

DSC_3601

「「「「お肉まだかなー」」」」の顔

DSC_3605

DSC_3607

いい感じに焼けました!!!わーい!!!(鉄板熱い!!!)

DSC_3616

DSC_3621

焼けたお肉をみんなに切り分けてくれるシェフ植村さん。
と、炊きたてのごはんを山盛りよそって走り去る食いしんぼう小谷さん(笑)

DSC_3596DSC_3635

DSC_3637

今回の目玉の淡路姫牛!!とろけるおいしさ!焼き加減も最高でした.+*☆

DSC_3645

次は締めの焼きそば!はりきって作ってくれる武士さん

DSC_3653

ビール片手に…

DSC_3643

DSC_3642

アグレッシブ!!(速すぎてブレブレ)

DSC_3675

具沢山のおいしい焼きそば完成☆

DSC_3676

IMG_6597

最後は大玉のスイカ割り!(なぜか社長持参の斧(!!)で)
佐藤さんが一発で綺麗に真っ二つにしてくれました!すごい!

DSC_3666

スイカも食べてお腹いっぱいでみんな大満足でした^o^
弊社はスタッフ全員シャイなのでテンション高めの写真は少ないですが(笑)普段仕事では関わりの少ないメンバーで話したり、映画やゲームトークで盛り上がったりと各々すごく楽しめました♪
また暖かくなったら開催したいですね!

医業等に係るウェブサイトの監視体制強化事業の開始について

厚生労働省は、不適切な表示やうそ、大げさな表現がなされている医療機関のホームページについて指摘があることをから、一般の方でも通報が出来るウェブサイト「医療機関ネットパトロール」を開始しました。

弊社ではサイト制作の際、ご提供頂いた原稿に目を通させていただいており、気になる表現などは病院様にお伝えする体制をとっております。

 

尚、これまで誇大表現や不適切な表示にあたるような内容はありませんでしたが、今後も引き続き病院様のお手伝いをしていきたいと考えております。

 

PC

【Mac】ウィンドウを隅に寄せるツール「shift」

メディカルデザインの平野です。
Macユーザーの方で、作業中にブラウザやソフトのウィンドウが乱立し、
ウィンドウ管理に困ったことはないでしょうか。
ウィンドウを分割し、隅や片側に寄せてくれるツールが「shift」です。
ショートカットにより、
左右上下に1/2表示、1/4表示、センタリング、最大化、ウィンドウの縮小拡大等が行えるため、
ウィンドウの管理がスムーズに行えます。

 

170721_02

左右1/2分割

170721_01

4つ角1/4分割

 

スクリーンショット 2017-07-21 10.12.48

ショートカット設定画面

 

 

 

shiftのダウンロードはこちらから

Backlog のSVNを別サーバーに移す方法

sample

システム部の渡辺です。
業務で SVN を使ってまして、SVNリポジトリはだいたい Backlog を利用しています。

http://www.backlog.jp/

Backlog の容量節約のために、一部を自社で管理している SVNサーバーに移行したいなとなりまして、やってみたらそんなに難しくなかったのでその手順をメモ。

 

1. Backlog の リポジトリをローカルに複製する

http://www.backlog.jp/faq/service/subversion-1.html
Backlog 公式記事「Subversion のリポジトリのエクスポートサービスはありますか?」、
ここに複製用の スクリプトを書いてくれてますので、これを利用します。
記事内のスクリプトをローカルPCに テキストファイルとして保存します。
ファイル名は「backlog_svnsync.sh」としておきます。

まず、backlog_svnsync.sh に実行権限を与えまして

$ chmod +x ./backlog_svnsync.sh

次に backlog_svnsync.sh を実行します。ここで渡す引数によって、どのリポジトリを複製するか決めます。
必要になるのは「バックログのサブドメイン部分」と「リポジトリ名」で、
「バックログのサブドメイン部分」は、利用しているバックログのURL https://○○.backlog.jp/ の ○○ の部分のことです。
「リポジトリ名」は、複製したいバックログプロジェクトのプロジェクトキーのことです。
スクリプト実行時にその2つを引数として渡します。

$ ./backlog_svnsync.sh ${バックログのサブドメイン部分} ${リポジトリ名}

スクリプト実行して処理が終わりますと、目的のリポジトリの複製が、リポジトリ名のディレクトリ名で作成されています。

2. リポジトリ複製から svn の dump ファイルを作成する

svnadmin の dump で作成します。

$ svnadmin dump ${リポジトリのディレクトリ名} > ${出力するダンプファイル名}

3. dump ファイルから svnリポジトリを リストアする

2で dump したファイルを、移行したい svn サーバーに保存しまして、

$ svnadmin create ${新規リポジトリパス}
$ svnadmin load ${新規リポジトリパス} < ${2で出力したダンプファイル名}

完了です。

【PHP】無名関数で再帰呼び出しの落とし穴

こんにちは。 システム部のたかくです。業務でPHPに触りだしてから2ヶ月ほどになります。 デバッガがないのでステップ実行もない、変数の内容を拾うのにいちいち出力するの煩わしいなどと、 まだまだ開発環境そのものを見直したくて仕方ない時期です。

概要

さて、記事タイトルのお話になります。 “WordPressで、特定のスラッグを持つ最上位の固定ページから、最下位までの固定ページをリスト化する”という処理が必要になりました。 「wp_list_pages()があるじゃないか!」とも思いますが、ただリストが欲しいだけではありません。 適切な形でhtml出力するにあたって細かく制御する必要がありました。 ツリー型の構造を得たいなら再帰の出番です。 諸事情で新しく関数を書き足すことは避けたい状況でしたので、手続き的に書きたいなと思いました。 そうなると無名関数しかないよなーと思い、安易に手を出したら軽くハマってしまったのでその備忘録になります。 (PHPの無名関数は5.3からサポートされているようですよ)

最初に書いたもの

$family = function ($children) use (&$contents) {
    if (count($children) == 0) {
        return;
    } else {
        foreach ($children as $child) {
            // 前処理
            $nextChildren = get_children(array(
                'post_parent' => $child->ID,
                'post_type' => 'page',
            ));
            $family($nextChildren);
            // 後処理
        }
    }
};

$family($firstChildren);

(見づらいですが) 出力したいhtmlテキストの形式が若干特殊なため、最初に該当ページの最上位ページを拾ってからその直下のページだけを$firstChildrenとして取得しています。 それを無名関数に投げて再帰的に呼び出し、前処理と後処理の中で$contentsにhtmlテキストを格納していく、というものです。 変数のキャプチャの仕様はいろんな言語で違うため、真っ先に調べてuseを使うんだなーとぼんやり理解しました。 無名関数も関数の1つであるからか変数のスコープが外側と異なるため、$contentsには参照を渡さなければ処理が値に反映されません。 しかし、これで動いてくれることを期待しましたが見事に実行を停止してしまいます。

なぜなのか

無名関数の中と外ではまったく別のスコープであると予想します。 $familyという変数に無名関数を渡して、その中で$family()を再帰的に呼び出しています。 この無名関数は$familyという変数があることをまったく知りません。 スコープの外の存在は$contentsのように丁寧に教えてやらなければ見つけてくれないのです。 これが原因でした。

せいかい

$family = function ($children) use (&$family, &$contents) {
    if (count($children) == 0) {
        return;
    } else {
        foreach ($children as $child) {
            // 前処理
            $nextChildren = get_children(array(
                'post_parent' => $child->ID,
                'post_type' => 'page',
            ));
            $family($nextChildren);
            // 後処理
        }
    }
};

$family($firstChildren);

ちゃんと無名関数を渡す変数もuseでキャプチャしてあげましょう。 無名関数の中で自分を表すキーワード(クラスで言うthis)なんかが書ければ、 無名関数を渡される変数名が関数の定義の中の変数名に縛られないので、自由度が増すのですが… ありませんか?

【CSS】困ったときの「Can I use…」

こんにちわ。システム部のコタニです。

前職では、html/cssのコーディングをメインで行っていたため、
日々の業務ではなれない記述や黒い画面(ターミナルのことです)に
四苦八苦していますが、どうにか頑張っています。
ここでは覚えたことや、気をつけなければいけないことをまとめていければと思います。

さて、コーディングを行うにあたって、いっつも悩まされるIE(Internet Explorer)も
今年4月に最新版以外のサポートが切れ、喜んでいたのもつかの間、
案件によってはまだまだ対応されている方も多いかと思います。

そうなると、気になるのがブラウザごとのスタイルの対応状況。
できるだけ気をつけて制作はしていますが、なかなか全ての不具合をつぶし切れず、
一体なにが原因なのか、ググってもなかなかわからず、途方にくれてしまいそうな時、
ぼくは「Can I use…」を見るようにしています。

Can I use…

caniuse_01
https://caniuse.com/

古いブラウザのみではなく、モダンブラウザでも不具合が多発することがあります。
単純にベンダープレフィックの問題だったり、そもそも使えなかったりしますので、
いったん落ち着く意味も兼ねて、まずは確認です。

また、Sublime TextやAtomなどでパッケージが用意されているみたいなので、
ぜひ使ってみてはいかがでしょう?

(ぼくはこの記事を書いている時に初めて知りました。)

caniuse_02

※Atomでの見え方です。

WordPressの投稿画面で「この投稿を先頭に固定表示」チェックボックスを非表示

だいぶ間が空いてしまいました。
ちょっと余裕出てきたシステム?の渋谷です。

WordPressの知識を増やすためにWordpressのプラグイン作ろうか、ってことで一つ簡単に作ってみることにしました。
ネタ不足にならないようにシリーズでお届けできたらなぁと考えてます。

プラグインが実務上使えることは前提ですが、あくまで勉強のためなのでよそのプラグインと機能が被ったりするのは気にしないことにします。

「この投稿を先頭に固定表示」チェックボックス

stucky

 

いつの間にかについていた機能の「この投稿を先頭に固定表示」…。
WPのバージョンを上げたら表示されるようになって、「この投稿を先頭に固定表示」を押しても先頭に表示されないとクライアントに言われてしまうという機能です。

新規サイトでは対応してしまってもいい機能なんですが、以前からあるサイトでは対応に時間がかかるのでチェックボックスを非表示にすることで問題が起きないようにしました。

作業的には非表示にするjavascriptをアップしてfunction.phpにそのjsファイルを読み込む機能を付け足すだけになります。

ただし、非WP管理サイトが山ほどある場合、いちいちfunction.phpに書いて…jsアップしてとやっているとfunction.phpを別なサイトにアップするリスクがあるので、function.phpに書いていた内容をプラグインにしてみました。

<?php
/**
 * @package Remove Sticky Checkbox
 * @version 1.0.0
 */
/*
  Plugin Name: Remove Sticky Checkbox
  Plugin URI: https://blog.medical-design.co.jp/
  Description: 投稿画面の「この投稿を先頭に固定表示」チェックボックスを非表示にします。
  Author: Medical Design
  Version: 1.0.0
  Author URI: https://www.medical-design.co.jp/
  Text Domain: remove-sticky-checkbox
*/

function remove_sticky_checkbox() {
    echo ‘<script>if(typeof jQuery != “undefined”){jQuery(function(){jQuery(“#sticky-span”).remove();})}</script>’.”\n”;
}
add_action( ‘admin_head’, ‘remove_sticky_checkbox’ );
?>

この内容を書いたphpファイルをフォルダごとプラグインフォルダに突っ込んで回って有効化するだけです。

このプラグインの数少ないポイントはadmin_headで動かしていることでしょうか。
どのタイミングでプラグインを動かすかはプラグイン API/アクションフック一覧に書いてあるのですが、

admin_print_scripts
  管理画面各ページの <head> 要素に JavaScript を追加するために実行する。

最初これで動かしたらjqueryが読み込まれる前、headの前の方に書かれてしまって動きませんでした。
実際に管理画面にプラグインを放り込むとこんな感じ。

stucky2

投稿画面でチェックボックスが消えてくれたことを確認。

stucky3

今回作ったプラグインファイルはこちら