スタッフ厳選おすすめ情報

おすすめ仕事術

おすすめ情報

2016年10月12日

ロゴをデザインする時におさえておきたい11のルール

11-rules-of-you-want-to-suppress-when-you-design-a-logo

入社して8ヶ月が経とうとしている私に
初めてのお仕事がやってきました!
なんとロゴの制作です。
個人的に遊びで作ったことはあるのですが、
サイズ感など全くわからない状態で作っていたので、
これは絶対何かルールがあると思い調べてみました。
調べて正解でしたね。
結構知らないことがあったので、
今回はこのロゴデザインのルールについて
書きたいと思います。

まずは基本設定から

サイズは大きすぎず、小さすぎず

ロゴ作るぜ!と新規作成を開いたのはいいものの、
「あれ?ロゴってどれくらいのサイズで作ればいいんだ?」
といきなり手が止まりました笑
いろいろなサイトを回って調べたところ、
サイズはなんと、自由!
入稿時の注意点さえ守っていれば大丈夫です。
ですが極端に小さいのもよくないし、
大きすぎるのも処理をするのに時間が
かかることもありますのでA4サイズくらいが
丁度いいと思われます。

基本はCMYKで

ロゴを制作する際、色の設定はCMYKになります。
名刺、チラシ、DMなどの印刷物に
多く使われるからです。
ただ、サイトに入れたい!というクライアント様は
たくさんいらっしゃると思いますので、
CMYKとWEB用にRGBのもの2つを
用意しておくと親切です。
2つ用意するのは手間がかかる…と
思われる方は、RGBの色コードを
書いてあげるのもいいと思います。

 要望をしっかり聞くことが大事

できるならばヒアリングシートなどを活用し、
クライアント様と話をつめることで、
制作した後のズレが少なく済むのではないでしょうか?
そんなヒアリングシートですが
どんなことを聞いたらいいのか、
簡単ですがまとめてみました。

ロゴの種類3タイプ

ロゴと言っても種類は3つあります。
クライアント様はどんなタイプのものを
希望されているのか、またユーザーに
どんな印象を与えたいのかによって
作るものが変わってきます。

1つ目はロゴマーク
会社や団体、家系(家紋)で持つ
シンボルのようなものです。
色や形などデザインに自由がきくので、
一瞬見ただけでどういう会社なのか印象を与えたい、
コンセプトを強くアピールしたい場合は
ロゴマークを作るといいでしょう。
代表的なロゴマークとしては
スターバックスコーヒーの人魚のマークや、
福井県民なら一度は見たことがある
福井県の丸いマークがあります。
(ちなみに福井県のマークは片仮名の
フクイという文字を元に制作しているようです)
また、ロゴマークが有る会社と
無い会社の名刺を比べると、
ロゴマークが有る会社のほうが
規模が大きく感じられるそうです。

2つ目はロゴタイプ
会社名団体名を基本としたデザインで、
会社の印象やイメージより企業名や
ブランドを覚えてほしいクライアント様には
ロゴタイプがおすすめです。
例えば、携帯ショップのdocomo、au、
softbankなどはロゴタイプがかなり強い印象に
なっています。

3つ目はロゴマーク、ロゴタイプ一体型
名刺などでよく見かけるのは、
ロゴマークとロゴタイプの一体型ではないでしょうか。
会社名団体名を知ってほしいけど、
印象も与えたいというクライアント様は
一体型を作るといいでしょう。
代表的なものではスポーツメーカーの
アディダスや、清涼飲料水のポカリスエットなどが
あげられます。

ユーザーの性別や年齢を知っておく

ターゲットとなるユーザーの
性別や年齢を知ることはとても大事です。
知っておくことでデザインの方向性が
固まったり、イメージしやすくなります。
例えば子どもを対象としたものなら
ポップで明るいデザインにしたり、
50代の男性ならば高級感のある黒や
茶色を使用した落ち着いたデザインにしたりと
方向性が決めやすくなります。

コンセプトや思いからイメージをつかむ

ロゴ制作を依頼されたということは
クライアント様は会社や団体になんらかの
コンセプトや思いを持っているはずです。
ユーザーに何を伝えたいのか、
どういう印象を与えたいのかを
ヒアリングすることでより
メッセージ性の強いロゴになります。

抽象的な表現には気をつける

ロゴだけではなくサイト制作の時もそうですが、
テイストを聞き出す時に「可愛く」や
「格好良く」など抽象的な表現が
多く出ると思います。
ただ、「可愛く」というジャンルの中には、
大人っぽい可愛さや子供っぽい可愛さなど
人それぞれの感性があるので、
どういう可愛さなのかもっと具体的に
聞く必要があります。
参考となるロゴのデザインを
教えてもらったり、
キーワードとなるテイストの
深堀りをして、イメージを共有することで
大きいズレが生じるのを防ぎましょう。

 以外とあります!データ受け渡しの決まり

ロゴを制作した後は
そのデータを渡します。
ここ最近私がもっとも恐れていることが
あります…
出したデータが戻ってくることと、
印刷所から電話がかかってくること…
自分のチェックが漏れているので
しかたないのですが、心臓に悪いです笑
受け渡しのデータは入稿データと
同じようなルールがあるので、
自分に言い聞かせるために書きます。

 文字はアウトライン化を

アウトラインが大事なのは
ロゴだけだはなく印刷物も同じです。
印刷所のパソコンには無いフォントを
使用していると、
別の書体に置き換えられたり、
カーニングが狂ってしまったり、
文字化けするおそれがあります。
近年商用可能で使えるフリーフォントが
たくさん出てきているので
アウトライン化は忘れず行いましょう。

線は線のままでおいておかない

上記のアウトライン化する理由と
同じなのですが、線情報も拡大縮小をすると
線の太さや周りとの間隔が狂ってしまうので、
パスのアウトライン化をして
線情報から塗り情報に変えておきましょう。

白い部分は油断するな

最近身近に起こったことで
注意しなければ!と思ったことの1つに
データの透明部分があります。
aiデータは背景が透明なため、
背景に白色を使用すると
透明になったように感じます。
webや印刷物で使用する時に、
背景が白い場合は気づきませんが
白色以外で使用するとがっつり
目立ってしまいます。
透明部分は色が付いている背景に
乗せても透明のままなのか
確認しておきましょう。

CMKY、RGB、グレースケールを確認

印刷物はCMKYにして制作しますが、
最初にも書きましたが
ロゴは印刷物だけでなく
webサイトなどにも使用するので
別でRGBのものを作るか、
もしくは色コードを記入してあげましょう。
また、色がモノクロになるのであれば
グレースケールで設定しましょう。
過去にモノクロのデータを誤って
CMYKで制作した際、
印刷会社の方から電話がきたことがあります笑

印刷会社によってバージョンを変える

これもつい最近あったことなのですが、
Illustraterのバージョンが合わなくて
データが戻ってきました。
制作時にはクライアント様
もしくは印刷会社にIllustraterの
バージョンを聞いて、合わせましょう。

まとめ

ほんの1週間前くらいにロゴ制作の仕事をして、
初めての経験だったので
いろいろな情報サイトを見て回りました。
いろいろな決まりがありましたが、
やはり一番大切だなと思ったのが
クライアント様との打ち合わせだなと思いました。
仕事上クライアント様と話をする機会が
ない中で制作していますが、
制作を始める前にどんな思いで
会社を立ち上げたのか、
どんなイメージで作ってほしいのか、
逆に初稿提出後修正指示を受ける度に
もっと営業の方に話を聞けばよかったと
思うことが結構あります。
クライアント様と直接会う機会があれば
今後はヒアリングシートなどを
活用していきたいと思います。

先輩が「ロゴ制作楽しいよー」と
言っていた気持ちがわかった仕事でした!

おすすめ情報

2016年10月6日

素直に自分を伝える「アサーティブコミュニケーション」

assertive-communication

コミュニケーションは会話のキャッチボールです。
仕事上で相手にお願いしたいことは、
相手が理解できるように具体的にわかりやすく伝えたうえで、
「やりとり」をしながら問題解決していく必要があります。
ところが、私たちは次のようなやり方で
コミュニケーションをとってしまうことがあります。
まずは、自分のコミュニケーションパターン
に気づいてみましょう。

4つのコミュニケーションパターン

会話が一方的になってしまう「攻撃型」

人との関係を勝ち負けで考え、一方的にものを言ってしまいます。
きつい言い方、威圧的な態度、矢継ぎ早で早口、
相手の話を聞かない、正論で押し切るなど、
「一方的」「怒っている」「威圧的」な印象を与えてしまいます。
後輩のミスに辛抱強く対処していたものの、
何度もミスを繰り返され、とうとう「何度言ったらわかるの?!」
とキレてしまう、などもその例です。
言った直後は自分の意見が通ってすっきりしますが、
相手に対して言い過ぎたと反省したり、
相手を委縮させてしまい関係がぎくしゃくしてしまいます。
せっかく伝えたメッセージも相手に受け取られるどころか、
反発されたり無視されたりすることも。
キャッチボールではなく、
「ドッジボール」状態が攻撃型なのです。

自分が我慢してしまう「受身型」

いつも黙って我慢してしまうのが、受身型です。
「どうせわかってもらえない」「自分さえ我慢すればいい」
「自分でやった方が早い」などと思い、
相手に何かを頼まれると何でも「はい」と答えてしまいます。
ノーと言えないために自分が限界状態でも引き受けてしまいます。
受身型はまじめで責任感が強く、
周りには「いい人」だと思われるかもしれません。
しかし長い目でみると、
自分の意見が言えないためにストレスを溜め込んで
しまっていることもあります。
ある日突然怒り攻撃型に変身するか、
ストレスを抱え込んだまま、
体調を崩してしまうことにもなりかねません。

態度で示して相手をコントロールする「作為型」

作為型の特徴は、言いたいことを言葉ではなく
態度で示して相手をコントロールし、
常に自分の結論にもっていくか、
相手に罪悪感をもたせて手に入れたいものを
得るようにもっていきます。
自分の気持ちをイヤミや皮肉に変えて言うため、
相手を嫌な気持ちにさせてしまいます。
例えば「今日は忙しくて大変だから手伝ってほしい」
と率直に伝える代わりに
「こんな忙しい時に、よくも定時に帰れるよね、暇な人はいいね」
とイヤミを言ってしまったりする事もあります。

第四の伝え方がアサーティブ

アサーティブなコミュニケーションとは、
攻撃型でも受身型でも作為型でもない、
第四のコミュニケーションのあり方を言います。
人を威圧するような態度をとったり、
卑屈な態度をとることもなく、
誠実に率直にそして対等に、
相手と「やりとり」するようなコミュニケーションなのです。

みなさんはどのタイプに当てはまりましたか?

日本人には比較的多い、
自分が我慢してしまう「受身型」
に重点を置き、アサーティブになるためには、
どういうことに気をつけてコミュニケーションを
行っていけばいいのか。についてお話していきます。

上手な自己主張はできていますか?

あなたは、どんな人に対しても自分の
意見を適切に言えますか?
家庭や仕事の生活の中で、適切に自分の意見を
言っていくことはとても大事なことなのです。
やりたくない事を無理やり頼まれて、断れない・・。
このような方は多いのではないでしょうか。

しかし、自己主張を上手にしていかないと、
相手の用事につきあわされたり、
相手の思うように事を進められてしまうことがあります。

例えば、、、

・タバコの煙をずっと我慢してしまう
・大事な用があるのに仕事(残業)を断る事ができない
・早く話を終わりたいのに、長電話に付き合ってしまう
・自分の推したい企画があるが通す事ができない
・間違いをなかなか言い出す事ができない

などなど、上記のような例があります。
つまり、自己主張ができるかできないかで、
自分の行動や生活を左右することがあるということです。

みなさんの中にはこのような悩みを抱えている方も
多いのではないでしょうか?
日々の生活の中で少しづつストレスが溜まり、
自分でも知らず知らずのうちに
精神的な健康を害してしまったり、
肉体的健康面も害する可能性があります。

自己主張ができない原因

では、自己主張が上手くできないことの
原因はどのようなことにあるのでしょうか?
以下の4つの原因があげられます。

アサーティブとは?

主張的でも非主張的でもない
ほどよい自己主張のことです。
攻撃的な自己主張になると、
感情を表に出して相手と衝突し、
相手を傷つけてしまう事もあります。
逆に非主張的だと自分の意見を抑えてしまい、
相手に自分の意見を何も言えず、
ストレスを抱え込みやすくなります。

上手な断り方を身につける

断り方が下手だと、自分があまりしたく
もないと思っていることに付き合わされてしまう事もあります。
また、逆に無理に断りすぎて相手との
関係を崩してしまうこともあり得ます。
断り方にもコツがあるのです。

話をまとめることができない

うまく話がまとめられず、
いざ話そうと思ってもなかなか言葉が出てきません。
「あれ?何を話すんだっけ?」と頭の中が?でいっぱい
になって、パニックになってしまいます。

相手が理解できない表現を使ってしまう

相手が理解できない表現を多く使ってしまうのです。
主張下手の特徴でもあります。
例えば、回りくどい言い方や、
「あの…」「その…」といった言葉
を頻繁に使ってしまうことです。
スマートな表現ができないと、伝わりづらいですし、
結局は相手に理解されにくい表現になってしまいます。

アサーティブスキルを身につけよう

アサーティブが身につくと対人関係が楽になります。
アサーティブとは、自分も相手も尊重しながら、
素直にコミュニケーションをとる方法のことを言います。
「自分も相手も尊重」とは、何かとても理想的な感じがしますね!
そんな理想的なコミュニケーション方法も、
ポイントを抑えることで身につけることができます。

そんなアサーティブが身についている人は、
たとえ意見が食い違っていても
お互いにとって納得のいく意見をすり合わせていきます。
お互いが納得して話を終えることができるので、
人間関係も上手くいくという好循環が生まれます。
すると、仕事では創造的なアイディアが生まれやすくなりますし、
家庭では家族が協力的になったりと、
関係性も良好になっていくことが期待できます。

では、そんなアサーションを身につけるためのポイントとしては
どんなことを押さえていけばいいのでしょうか?

アサーティブを身につけるための3つのポイント

ここで、アサーティブを行うための
3つのポイントをお伝えしたいと思います。

自分の気持ちを素直に伝える

主張をすることが苦手な人は、
つい自分の気持ちを押さえて意見を言えなかったりします。
言わなかったことで劣等感を感じたり、
自信を失ってしまうこともあります。
誰にでも自分の気持ちを素直に表現する権利が
あることを念頭におき、
相手に伝えていきましょう。

相手の気持ちを考えて柔軟な言い方で伝える

素直に気持ちを表現することがわかったら、
それを柔軟な言い方に変えてみましょう。
例えば、作ってもらった資料に間違いがあった時に
「ちょっと!何ミスしてるの!?ちゃんと資料作ってよ!」
とストレートにぶつければ、
相手もきつい言い方で返してくはずです。
ここでは、表現を柔軟に変えるという工夫が必要になってきます。

お互いに尊重する

柔軟な表現ができたら、
今度は自分も相手も納得できる結果だった
かを考えてみましょう。
こちらが一方的に納得のできる結論では、
相手は必ず不満に思ってしまいます。
時にはこちらから歩み寄る姿勢も必要です。
その辺は人間関係のバランスが大事になってきます。

バランスの良い自己主張を身につけよう

誰にでも自己主張をする権利があります。
〇〇〇だから言ってはいけないとか、
黙って我慢していなければならないといったことはありません。
かと言って、主張が一方的になったり、
攻撃的になってもいけません。自己主張のバランス
を身につけるということが大事です。

そのためには、相手に主張する時は、
素直に、柔軟な言い方で、自分も相手も良い方法
で自己主張していくことが大事なのです。

おすすめ情報

2016年9月18日

illustratorとPhotoshopの違い

the-difference-between-illustrator-and-photoshop
Bigmacに入社し、illustrator(イラストレーター)やPhotoshop(フォトショップ)を使用するようになりました。

入社するまではPhotoshopは画像の色を変えたり、
トリミングなど画像の大きさの調整のためだけにしか
使用していませんでした。
illustratorに関しては全く触っていませんでした。
いまだにあまり使えていない私ですが、簡単に違いをご紹介。

まずはAdobe CCについて

『Adobe CC』とはAdobe Creative Cloudの略称です。
クラウド上でAdobe商品のインストールやアップデートを
することができます。
今までのバージョンは、バージョンごとに販売されていたので
Photoshopやillustratorなどそれぞれのツールが
独立していました。
最新にするためにはその都度新しいツールを
買い揃える必要がありました。
その煩わしさをなくし、最新製品を月額で
利用できるようになりました。

Photoshop

入社する前は写真編集くらいしかできないソフトだと
思っていました。使い始めて写真編集だけではないと知り、
今回記事にしようと思って調べてみると、
かなりすごいソフトだと思いました。

Photoshopでできること

・電線や人、その他不要なものを自然な形で除去
・ぼかし機能を使い写真に躍動感を持たせる
・数枚の画像を連結させてアニメーションの作成・編集ができる
・3Dコンテンツの作成・編集ができる
・webデザイン

後半部分に関しては私が使うことはなさそうな気がする…が
入社するまでは写真を綺麗にするイメージしかなかった
Photoshop…調べてさらに優秀ソフトだと感じました。

環境設定(編集→環境設定)

最初に作業しやすいよう環境を行いましょう。
▼単位の設定
Photoshopの初期の状態は定規がmm文字がpointになっているので
使用するものに合わせて変更しておくことをお勧めします。
webデザインの場合はpixclに変更。

▼グリッド線
グリッド線とはPhotoshop上にマス目を表示させます。

▼ファイルのバックアップ
Photoshop CCの場合、初期の状態で10分ごとにファイルが
保存されるよう設定されているみたいですが5分〜1時間、
自動なしと設定を変更出来ます。

illustrator

▼illustratorでできること
・印刷物制作
・ロゴや広告、アニメキャラなどイラストの作成
・グラフィックデザインの作成
・web/モバイルデザイン(アイコン作成/合成フォント)

環境設定

こちらもPhotoshop同様単位/グリット線の設定を行うと
作業時困らないと思います。
プロファイル選択時作業に適した単位が設定されます。

二つのソフトを比較してそれぞれのソフトに向いている作業

▼Photoshop
webデザイン
写真加工

▼illustrator
ロゴデザイン
イラストデザイン
ワイヤーフレーム
ポスター制作

▼イラストレーターでwebデザインを作成する場合の注意点

印刷物制作時によく使用されるイラストレーター。
web制作で使用するときはカラー形式の設定に注意しましょう!!

カラー形式には2種類あります。

▼CMYK(色料の三原則)
C→Cyanシアン
M→Magentaマゼンタ
Y→Yellowイエロー
K→Key Plateブラック

印刷物がこの形式です。
混ぜると色が暗くなり、黒に近くなります。

▼RGB(光の三原色)
R→Red赤
G→Green緑
B→Blue青

テレビやパソコン、デジカメがこの形式です。
混ぜると色が明るくなり、三色合わせると白になります。

RGBのデータをCMYKに変換する際はPhotoshopの
イメージ→モードで変換ができます。
(RGBをCMYK画像にした場合モニター上で
色が暗くなる場合があります。)

illustratorとPhotoshopの違い

・クリッピングマスク機能においてはillustratorでは
オブジェクトの上にマスキングされ、Photoshopでは
オブジェクトの下にマスキングされます。

・前の作業に戻るショートカットキー
Ctrl + z。
illustratorでは複数戻ることができますがPhotoshopでは
一つ前までしか戻れません。
・illustratorではワークスペース以外の場所にパーツを
配置したり素材を置いて作業ができますがPhotoshopでは
ワークスペースの中でのみ作業可能です。
・ファイルの保存速度はillustratorは早くて
Photoshopでは遅くなりがちです。
・Photoshopはラスタ画像と呼ばれる、ドット絵のような
四角形の集まりで画像を表現します。
そのため拡大すると、荒い表示になります。
illustratorはベクター画像と呼ばれる。
点座標や線の方程式で画像を表現しています。
ビットマップ画像と違い拡大しても荒くなることはありません。
Photoshopで作る場合あまり拡大するとギザギザの画像に
なってしまうので原寸大で作成することをお勧めします。

その他Adobe製品の紹介

■Lightroom
デジタル一眼レフカメラなどで撮影した写真を
管理・編集するツール。

■Acrobat DC
PDFの閲覧・作成を行うツール。

■Dreamweaver
webサイトやモバイルコンテンツを構築できる
ホームページ作成ソフト。

■After Effects
動画編集ツール。

Adobeは体験版がでているのでまずは体験版を
使用し使ってみることをお勧めします。

Photoshop&illustratorに関する資格

▼Photoshopクリエイター能力認定試験
画像の編集・調整加工能力を認定する試験。
スタンダード・エキスパートの2種類あり、
スタンダードではPhotoshopの基本操作や
指示通りに作業できるかが中心。
エキスパートではwebデザインの基本的な知識が
あるかどうか、目的に対して創造的な制作が
できるかどうかが判断基準となっている。

▼illustratorクリエイター能力認定試験
illustratorを使用し、提示されたテーマ・素材から仕様に従い
コンテンツを制作する能力を認定する試験。
こちらもPhotoshopクリエイター能力認定試験同様、
スタンダード・エキスパートの2種類あり、
スタンダードはillustratorの基本操作や
指示通りに作業できるかが中心。
エキスパートではDTP/webデザインに関する
基本知識があるかどうか、
デザインコンセプトや目的に応じて
表現できるかが判断基準となっている。

▼アドビ認定アソシエイト
アドビシステム社が行ってる資格認定制度。
この試験に合格すると世界共通の認定証が発行されるので
就職や転職、仕事でのスキルアップに有利になるため人気の資格。

まとめ

いままでよくわからなかったこの二つのソフトですが、
状況に応じて両方のソフトを使えることが望ましいと思いました。
両方覚えるのはとても大変そうですが
それぞれの特化した部分から理解していけたらなーと…。

今現在webに関するものはPhotoshop、DTPはillustratorを
使用するという感じで使ってきましたが、時間があるときに一度、
illustratorでのwebデザインをしてみたいなと思いました。

おすすめ情報

2016年9月13日

2・6・2の法則

the-law-of-2-6-2

2・6・2の法則とは…

人間が集団を構成すると、

「優秀な人…2割、普通の人…6割、あまり働かない人…2割」
という構成になる法則です。

 「あの人がなかなか成長しない…」

「あの人は、どうしたらヤル気を出してくれるんだろう…」
などと思ったことありませんか…?

 それは、まさにあまり働かない人…2割の方に対して抱く悩みです。
ただ、残念ながら悩みは解消されません。

なぜなら、自然の法則なのでどうにもできないことなのです。

 ここで、2・6・2の法則をもっとわかりやすくするために、
色んなパターンで2・6・2の法則の現象を紹介していきます。

 

人間が集団行動を行った場合

集団で何らかの活動をしていると、
2割の人が率先してリーダーシップを発揮し、
6割の人がそのリーダーシップに引っ張られて働き、
2割の人があまり働かないという傾向があります。

 次に、2割のあまり働かない人たちを除いて、
残りのメンバーだけで同様の活動をすると、
やはりメンバーの2割の人が、新たにあまり働かなくなり始めるのです。

 逆に、あまり働かない人ばかりを集めてグループを作り、
活動をさせると、その中の2割の人がリーダーシップを発揮し始め、
6割の人は、それに引っ張られて働き始めます。

これは、優秀な人ばかりを集めてグループを作った場合も同様で、
6割は普通に働き、2割はあまり働かなくなります。

人間は、働かない人ばかりの集団だと
逆にリーダシップを発揮して働く気になる人もいますし、
働く人ばかりの組織に入るとむしろ控えめになり働かなくなることもあります。
強い組織、弱い組織に関わらずこの法則は存在します。

 あの働き者のアリでも…

実は、働きもののアリでも同じ現象が起きているのです。

100匹の働きアリを観察してみると、
そのうち20匹(2割)がよく働き、
60匹(6割)が働きアリに引っ張られて普通に働き、
そして残りの20匹(2割)が全く働かない状態になっています。

 仮に、働かないアリ20匹をそこから取り除くと、
残った80匹のうち、16匹(2割)がよく働き、
48匹(6割)が普通に働き、16匹(2割)が全く動かない状態になり、
常に「2・6・2」の比率になるようです。

この2・6・2の法則は、生物界の食物連鎖にも関連してきます。

 例えば、
オオカミとシカが生息している地域に、
シカを保護するという名目で、
人間が銃でオオカミを撃ち殺し、絶滅したとします。
オオカミがいなくなったので、
シカが異常に繁殖しはじめ、
シカの大群は草を食べ尽くしてしまいます。

その結果、
食べる草がなくなったシカも絶滅してしまうのです。
オオカミが生息しているからこそ、
シカも絶滅せずにすんでいたのです。

全ての生物は、本来、絶妙なバランスで存在していて、
自然に均衝を保っているのかも知れません。

 

スポーツ界で例えると…

スポーツ界で例えると、
スタープレイヤーを集めたチームを作っても、
ズバ抜けて強いチームができるわけではないのです。

 逆に、スタープレイヤーを引き抜かれてしまったチームには、
次のスタープレイヤーが誕生したりします。

 

2・6・2の法則を有効的に使うには

この法則を理解した上で、どのように活用できるでしょうか。

 例えば、会議でいつも発言しない人がいたとします。
その人に発言してもらうには、
発言しない人ばかりを集めて会議をすればいいのです。

 無口な人ばかり集めて会議をさせると、
ちゃんと口を開き始める人が生まれます。
そして、その中からリーダーシップを発揮する人もでてきます。
 人間は、不思議と「自分がいる集団」によって、
様々な役割を演じることができるのです。

それを活用して、会社内に色々なプロジェクトチームを編成し、
各プロジェクトを任せきるのもいいと思います。

 

人間関係に当てはめてみると

2・6・2法則によって、人間関係を気楽に考えることもできます。

 もしも、あなたと意見が合わない人がいても気にすることはありません。
あなたと意見が合う人が2人いたら、当然、意見に反対する人も2人、
どちらでもない人が6人いる。

意見が合わない人がいるからと落ち込むことなく、
自然の法則なんだと受け入れることです。
これに逆らおうとするから、人間関係が苦しくなってしまいます。
無駄なエネルギーを使わず、すぐに割り切ることが大事です。

 まとめ

・優秀な個人のチームをつくろうとしないこと。

・残念ながらあまり働かない人(2割)が必ず生まれてしまうことを理解すること。

・あまり働かない人は、優秀な人が優秀であり続けるために、
たまたまその組織ではあまり働かない人を演じているにすぎないこと。

・あまり働かない人を見捨てることなく活かす手立てを考えること。

 

組織の上に立つマネージメントする方々は、
の2・6・2の法則を理解していただけたらと思います。

そして、この法則を理解した上で、
メンバーのモチベーション設計をすることが重要な役割になります。

 

おすすめ情報

2016年9月12日

噂のCSSの機能、擬似要素をご紹介!

function-of-the-css-of-the-rumor-introduce-a-pseudo-element

 

今年からコーディングをする時に見かけるようになった擬似要素。
先輩のコードを引き継ぐ時に、見慣れない記述があり、
「この記述なんだろ…?」と眺めていましたが
最近どのサイトのコードを見ていても記述してあるので、
そろそろ知っておかなきゃやばいなと感じ、
今回の記事のテーマにしました。

そもそもCSS3って何?と思う方も
いらっしゃると思います。
CSS3とは、cssの第3版のことです。
CSS(Cascading Style Sheet)というのは
サイトのスタイルや
書式を記述する
言語の一つです。

ちなみにhtmlだけのサイトだと、
何の装飾もない文字と画像だけが出てきてしまいます。
下の画像参照。
 

screencapture-file-users-y-urushizaki-desktop-160428_akasha_lp-index-html-1473816933915

 画像は大きいし、まとまってないですよね?
CSSを記述するとこうなります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-14-11-13-35先ほどのhtmlのみのものと比べると見やすくなったと思います。

そのCSSの第1版が勧告されたのは1996年です。
ちなみにWindows95が出てきたのが丁度その頃です。
その後CSS2が1998年に登場し、2011年にはCSS2.1が登場!
結構最近ですね。
そして私が使用しているCSS3が今徐々に勧告されてきています。

CSSは使いやすくなっている!

CSS1からCSS2へのバージョンアップでは
いくつか互換性の無い部分があります。
つまりCSS2では使えてもCSS1では使えない
部分が出てきたのです。
ですが、CSS3は今まで使用していたものに
便利な機能がついただけなので、
1つのソースの中にCSS1、CSS2が
混じっていても問題ありません。
既存のソースを書き換えるというような
面倒くさいことをせずにすむのです。

4つの機能をご紹介!

私がコーディングを始めたのは昨年の終わりからです。
なのですでに擬似要素の機能はありました。
(今までほとんど使ってこなかったけど…)

擬似要素と擬似クラスの違いはスタイルが反映される部分。

ちなみに今回のテーマは「擬似要素」ですが、
「擬似クラス」というものもあります。

要素とクラスって…?

コーディングをしていて、この2つの違いが
曖昧だったので調べてみました。

擬似要素には以下のような種類があります。
::before(要素の前にスタイルを反映させる)
::after(要素の後にスタイルを反映させる)
::first-letter(最初の1文字目にスタイルを反映させる)
::first-line(最初の1行目にスタイルを反映させる)

擬似要素が反映されるのは文章の1文字目、
1行目など、
要素の一部分に対してです。
例えば、

<p>赤いりんご</p>
(<p> </p>は一つの段落を表すタグです。)

上記の文章で「赤」という文字だけ赤くしたい場合

p::first-letter{ color: #ff0000;}

と記述することで「赤」の文字だけスタイルがつけられます。

 

では擬似クラスはというと、以下のような種類があります。
:hover(マウスポインターを乗せた時にスタイルを反映させる。)
:visited(訪問済みリンクにスタイルを反映させる。)
:link(未訪問リンクにスタイルを反映させる。)
etc…

擬似クラスが反映されるのは指定したクラス全体です。
例えば、

<p>赤いりんご</p>
(<a> </a>はリンクを表すタグです。)

上記の文章で「赤いりんご」部分にマウスポインターを
乗せた時に
赤くする場合

a:hover{ color: #ff0000;}

と記述することで、「赤いりんご」の
文字全体が赤くなります。

簡単ではありますが、要素とクラスの説明は以上です。
次に本題の擬似要素について書いていきます。

使い方いろいろ!before・after

本当に便利だと思ったのが、
擬似要素のbeforeとafterです。
コードの書き方によって今まで
不可能だったことを可能にしています。
ずは基本的な使い方から紹介します。

①文章の前、もしくは後に文字をいれる。

<p>赤いりんご</p>

上記の単語の前に「お店で」という言葉と、
後に「買った。」という言葉を付けます。
CSSのコードは下記のようになります。

p::before{ content: “お店で”;}
p::after{ content: “買った。”;}

比較的簡単なコードだと思います。
before・afterで文字を入れるとドラッグしても
選択されないのでSEOには弱くなります。

②文章の前、もしくは後に画像を入れる。

<p>赤いりんご</p>

上記の単語の前後にりんごの画像を入れます。

p::before{ content: url(img/apple.png); display: block;}

文字と同じく画像はドラッグできません。

③くの字矢印を作ってみる。

<p>くの字矢印アイコン</p>

上記の文章の前にくの字の矢印をつけます。

p::before{
left: 3px;
width: 5px;
height: 5px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

このコードを見た時、そんな使い方もあるのか!
と驚いた覚えがあります。
今まで画像で入れていた矢印がCSSで
再現できてしまうなんてすごいですよね!

 応用することで、矢印を利用した吹き出しも
CSSだけでできてしまいます。

 <div class=”box”></div>
(<div> </div>は一つのかたまりを表すタグです。)

 赤い吹き出しをつけたいと思います。

 .box{
position: relative;
background: #ff0000;
height: 70px;
width: 400px;
margin-bottom: 20px;
}
.box::after{
content: ‘’;
position: absolute;
border-top: 20px solid #ff0000;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
bottom: -20px;
left: 50%;
}

探してみると他にもbefore・afterだけで
アイコンが表現できたり、リボンが表現できたり
するので、ぜひ探して見てください。

最初の文字を強調させる!first-letter

先ほど記述しました、first-letterです。
指定した一文字目にスタイルをあてることができます。
例文も先ほど記述したのでここでは書きませんが、
あまり見ないコードです。
私は数は少ないですが、様々なサイトのコードを
見てきて、first-letterまだ見たことがないです。

一行目にスタイルを当てたいならfirst-line!

first-letterと似ている機能です。
ただスタイルが反映される部分が
1行なので広くなります。

 <p>赤いりんごを買った。<br>
アップルパイにしようと思う。</p>
(<br>は改行のタグです。)

 上記の1行目を赤くしたいと思います。

p::first-line{ color: #ff0000;}

この記述だけで赤いスタイルがつきます。

 first-lineはfirst-letterと同じように
サイトのコードではなかなか見ません。

 所感

今回擬似要素を調べてみて今まで
曖昧だった
ことが確認できたり、
新発見につながりました。
現在サイトを制作していて、擬似要素
(特にbefore・after)の記述は見ない時がないです。
それだけたくさんのWEBデザイナーの方が
使用しているので新しい記述方法も
これからどんどん増えていくと思います。
まだ勧告されていないものもあります。
記述方法だけでなく、新しい擬似要素も
新しく出てくるでしょう。
今後も今の状態に満足するのではなく
新しいものにアンテナを張って、技術を
取り込みたいと思いました。

1 2 3 4 5 6 7 8 9 10 11 12 13 24