アルタ公式ページ

Alta Facebook

Facebookの軌跡

いいねランキング(直近30日)
1位:
0
【アルタフィリピン新オフィス情報🌍✨】 2018.05.28. アルタフィリピンから只今工事中の新オフィスの写真...
2位:
0
【5月第3週目のインターンシップ生 🌟】 2018年5月18日☆ 5月第3週目のインターンシップ生の最終日が5月1...
3位:
0
【本日のおやつ☆】 2018.05.21. 東京に出張に行っていた社員から 差し入れを頂きました😍✨ 社員で美味し...
■続・パスワード運用の話 サーバー担当:安達

前回、情報漏洩の被害から身を守るためにはパスワードを以下のように運用していくといいという話をしました。

・アルファベットと数字が混じった最低8文字以上の文字列にする
・サービス毎に個別のパスワードを使用する
・パスワードの中に公開された情報(ユーザー名やドメイン名、本名、会社名等)を含んではいけない

とはいえ、長くて複雑なパスワードをサービス毎にいくつも暗記するのは難しいですね。
そこで、少しでもその負担が軽減される方法を紹介します。

その方法とは、「文章をパスワードにしてしまう」というやり方です。

たとえば貴方がアマゾンで買い物をする場合のパスワードを考えてみます。
何でもいいから一つアマゾンに関係したフレーズを作ってください。
例えば「アマゾンは速くて安い」でもいいし「何でも買えるアマゾン」でもいいです。ここでは前者を使用します。

・まず、文章をひらがなにしてください
「アマゾンは速くて安い」
→「あ ま ぞ ん は は や く て や す い」

次にローマ字にしてください
→「a ma zo n ha ha ya ku te ya su i」

区切り毎の最初の一文字だけ抜き出してください
→「a m z n h h y k t y s i」

最後に好きな数字を一つ付けてください(ここでは7にします)
→「a m z n h h y k t y s i 7」

この文字列がパスワードになります
「アマゾンは速くて安い」→「amznhhyktysi7」

このやり方で作ったパスワードは総当たり攻撃に強く、
サービス毎にパスワードを作ってもそれなりに暗記しやすいという特徴があります。
パソコンのローマ字入力の一文字目だけを抜き出しているとも言える方法なので慣れれば文章を頭に思い浮かべながらすらすらと入力できます。

大量のパスワードをできるだけ暗記したいという方、ぜひお試しください。
「バルス」のツイートが世界新記録を樹立された事に、驚いているデザイナーの安藤です。


無限スクロールの落とし穴


最近デザインで注目されているのが無限スクロールですが、実は全てのサイトにマッチするという訳ではなく、落とし穴も存在しています。

例えば、ECサイトなどで無限スクロールで商品が表示されるサイトで失敗をしたという記事がありました。

http://www.usability.gr.jp/weblog/infinite-scroll.html

無限スクロールには検索結果が異なることやお気に入りなどに差が出てしまい、サイトを見に来た人がサイトをブックマークする事がありますが、その際に無限スクロールページをお気に入りなどに登録した場合に目的の商品が見る事ができないなどの要因があるようです。

またパン屑などで詳細ページで商品を見終わった際にブラウザの戻るボタンで戻った際に無限スクロールページに戻った際に、目的の商品が見つからず、サイトを離脱したりする事にもなります。


ですので、無限スクロールだからといって全てが良いわけではなく目的に合った使い方をすれば良い結果に繋がると理解しておくことが大切です。


無限スクロールのレイアウトも多様ですので、目的、用途などに合せて適宜デザインに取り入れていきたいものです。
どうも。へっぽこプログラマの丸山です。


HTML、スタイルシート、javascript、php・・
ソースコードを書くとき、どんな書き方をするか、
同じ結果だけど色々な書き方ができます。



もし、同じソースの中でいろんな書き方が混じっていたら読みにくいし、次に書くときはどのように書いたらいいか迷ってしまいます。


そこで
「コーディングガイドライン(規約)」という考え方があります。




例えば・・
スタイルシートを想定しましょう。


■IDやクラス名の命名のつけ方

・IDとクラス名にはちゃんと意味の分かる名前を使う
・要素の目的や役割を反映した名前を付ける。
・意味の分かる範囲でできるだけ短いIDとクラス名を使う。


/* NG: 意味が分からん */
#yee-1901 {}


/* NG: 利用目的が不明 */
.table1 {}


/* NG: 見た目を表してる */
.button-green {}
.red-box {}


/* OK: 役割を表してる */
#gallery {}
#login {}
.video {}


/* OK: 汎用的な名前 */
.aux {}
.alt {}





複数の単語からなる意味を表現するときにいろいろな書き方があると思います。


・キャメルケース(大文字と小文字を使って詰める)
TopLeftBootstrapNavigation、topLeftBootstrapNavigation

・スネークケース(区切り文字を使う)
top-left-bootstrap-navigation、top_left_bootstrap_navigation


など考えられます。

どの書き方で統一するか・・?
ルールを決めておけば迷わないし
リズムを崩さず読みやすくなります。




これらはほんの一例で、
他にも・・
・コメントの書き方
・プロパティの記述順序
・インデントのつけ方
・HEX形式のカラーコードの短縮ルール(#fff or #ffffff)
・0の単位 (0 or 0px)
・セレクタとプロパティの分離

などなど・・



このようなルールを取り決めておきます。


コーディングガイドの目的は
「コードの品質保持・バグの減少・保守の容易性の確保」
です。



他人がコードを触るときも考え、リズムを崩さず一貫した書き方ができるよう心がけるのも大事です。
好きなスタバのメニューは、「トール抹茶フラペチーノソイミルクノンシロップエクストラホイップエクストラパウダー」の田中です。

"ブランディング"について、今非常に関心が高いです。
本を読んで、吸収したものについて、自分なりに書きたいと思います。


"ブランディング"、そもそもこの言葉はどういう意味なのか?
簡単には、3点なのかなと思いました。

それは、「"特徴、強み"を見つける」、
そして、「お客様へ最適な方法で伝える」
最終的には「そのブランドのトータル的な価値を高める」こと。


例えば、スタバを例にすると
「コーヒーが美味しくて、シアトル系で、カスタマイズできて、たくさんのフレーバーのフラペチーノがあって、ケーキやフードがあって、どれもこれも美味しいメニューがウリの、コーヒーチェーン店です!」

うーん…。。
いろいろあったけど、やっぱり、私に突き刺さるのは
「フラペチーノ」と「カスタマイズ」です。
実際に、スタバの広告やラインナップを見ていると、圧倒的にこれらに特化していることが分かります。

他コーヒー店も、デザインはもちろん洗練されていますが、
それぞれにフードだったり、豆の品質だったり、何かしらに特化して謳っていますね。
これが各店の「特徴や強み」です。


「デザイン=かっこ良くで、機能的で、オシャレで、可愛くて…」
それもあるけど、
とことん突き詰めていくと、最終的には
「デザイン=伝えたいことを、適切に伝えたい人へ伝えるための橋渡し」

と、あくまで、デザインはブランディングの手段の一つだということだと、本を読み進めていくうちに感じました。
というか、そのものがズバリ書いてありました。

でも、普段あまりここまで意識している人は少ないのではないかと思います。
自分もそうでした。

たとえば、「上品でオシャレでトレビアンなデザイン作って!」とお客様に要望をいただき、
自分なりに解釈をして作ろうとするものの、いまいちしっくりこない…、そんなことがあります。

「一番の強みについて、どういう人に伝えたいか」にブレがあるなど、だいたい、ヒアリング不足が原因だったりします。。

ただカッコイイものは作れるけど、本当に良い物、となると、難しいです。
最近、特によく思います。というか、今悩んでいます。

デザイナーって、ただ好きなようにデザインするだけではないんですね。
業種的に華やかに見られがちですが、結構、分析力とか、地道な部分も必要です。
この先もデザイナーとしてやっていくために、もっと勉強して、よいものを作って行きたいです。
そして、お客様に最高に喜んでいただきたいですね!


スタバも好きだけど、nana's green teaはもっと好きな田中でした。
プログラマーの斎田です。

今回はPHPの「'(シングルクォート)」と「"(ダブルクォート)」の違いです。


PHPは文字を出力する時に文字だということを教えるために特定の文字で括ります。
ここで使うのがシングルクォートと、ダブルクォートです。

大きな違いは、変数を展開するかしないかです。

例えば

$hoge = 'ほげ';
echo 'ほげ$hoge';

とすると、そのままの文字「ほげ$hoge」が出力されます。

$hoge = 'ほげ';
echo "ほげ$hoge";

とすると、変数が展開された「ほげほげ」が出力されます。

シングルクォートで囲った方が展開する処理がない分、
誤差程度に処理が早いそうです。

なので、どちらも変数を展開する以外は違いがないので、
使用者のこだわりで使い分けられます。


私の場合は簡単な文字だったら処理速度を優先してシングルクォートで全て行ってしまいますが、
長い文章、文字の連結、エスケープが多くなりそうなら可読性を優先し、ダブルクォートを使っています。

シングルとダブルクォート二つが入っていた場合は、
ヒアドキュメントという方法もあるので、うまく使い分けて、
他の人も読みやすいプログラムを作られるように心がけています。
こんにちは。「こんにちは」と「こんばんは」の時間の境目がとても気になっているデザイナーの尾関です。
今回は、「江戸のデザイン」についてお話します。

伝統工芸品に「江戸切子」というものがあります。
一見、WEBデザインには関係なさそうですが、和風のデザインを作る際に工芸品の模様をしっかり見ておけば、背景のデザイン等に取り入れることができますね。
美術館で作者や作品の解説を読んでおけば、コンセプトを決めやすいです!

実は、江戸切子の模様はガラス製のインテリア雑貨にも使われています。
和風イメージが強いと思われがちですが、使い方次第では洋風にもなるのです。
外国の技術と日本の誇りの結晶は、人々に残るものだと思います。

是非とも生で見たいです!
こんにちは、リスティングプロフェッショナルの宮田です。

前回は「専門用語」についてご紹介致しました。
インプレッション、CT、CTR、CV、CPAの五つを紹介しましたが、如何でしょうか、一個くらいは意味が浮かんでくる専門用語はあるでしょうか?
あれば幸い、なければ…頑張ります。

さて、今回は「季節」や「ニュース」とリスティングの関係性についてお話させて頂きます。


リスティングは広告主が設定したキーワードをユーザーが検索した時に表示される広告です。
なので、全てのユーザーが検索エンジンを全く使わなくなったら、リスティング広告はどこにも広告を出す事ができなくなります。
実際にそこまで極端な事はないのですが、「季節」や「ニュース」の影響によって、ほとんど検索されなくなるキーワードや、ものすごく検索されるようになるキーワードがあります。

一つ「季節」に関するキーワードを見てみましょう。

「クリスマスツリー」

…どうでしょうか。
画像はこの「クリスマスツリー」というキーワードを調べているユーザーの数です。
データは2012年のもので、1月から12月の推移を示しています。

完全に冬に関するアイテムなので、1~9月はほぼ調べているユーザーがいない事がわかります。
10月の終わりから少しづつ上昇を始め、12月をピークにまた下がっています。

そりゃあ当たり前でしょ、という声が聞こえてきそうですが、
変動の少なそうなキーワードでも、意外な時期に検索数が増えている場合もあります。

また、「ニュース」で大きく取り上げられる事によって、一時的にではありますが、普段からは考えられない検索数になるキーワードもあります。

リスティングで取り扱っているキーワードは勿論、リスティング担当者は調べて勉強します。
ですが大抵の場合、広告主様の方がその単語の事について詳しい場合が多いのです。

例えば魚屋さんのリスティングを代理店が請け負った場合の話です。
担当者はキーワード(ここでは「鯵」にしましょう)を調べます。
調べればすぐに鯵の旬が5月から7月辺りである事はわかりますが、魚屋さんであれば鯵についてもっと詳しい情報を持っているでしょう。
なにせ売り物にしているのですから、そのキーワードのプロとも言えます。
そうした方から助言や協力が頂けたりすると、担当者はよりスムーズにリスティングの運用を行えます。

皆様がリスティングを代理店に頼む事があれば、そういえばそんな事を言っていた奴がいたなぁ、
と思い出して頂ければ幸いです。

では今回はこの辺で。
また次回お会いしましょう。
刃の換え方がわかり辛いカッターに時間を取られたデザイナーの遠山です。

ユニバーサルデザインという言葉を聞いたことがある方は多いのではないでしょうか。

ユニバーサルデザイン(Universal Design、UD)とは、文化・言語・国籍の違い、老若男女といった差異、障害・能力の如何を問わずに利用することができる施設・製品・情報の設計(デザイン)のことを言います。


それってバリアフリーとどう違うの?と思われた方。
バリアフリーとは使い辛いと感じる人へ向けた障害を取り除いたデザインで、ユニバーサルデザインはそれらの人たちに限定せず、万人に対応したデザインをいいます。


空き缶の上部の点字や、シャンプーとリンスを区別するためのボトルの側面の凹凸、文字が読めない外国人などに向けたわかりやすいピクトグラム(イラスト)などは身近でよく目にするユニバーサルデザインですね。



どういったものがユニバーサルデザインと言えるのかをわかりやすくまとめた「ユニバーサルデザインの7原則」というものがあります。


1.どんな人でも公平に使えること(公平な利用)

2.使う上での柔軟性があること(利用における柔軟性)

3.使い方が簡単で自明であること(単純で直感的な利用)

4.必要な情報がすぐに分かること(認知できる情報)

5.うっかりミスを許容できること(失敗に対する寛大さ)

6.身体への過度な負担を必要としないこと(少ない身体的な努力)

7.アクセスや利用のための十分な大きさと空間が確保されていること(接近や利用のためのサイズと空間)


これら全てを満たすデザインを考えるのは難しいですが、これらを意識してデザインをするのとしないのとでは、使い安さがかなり違ってくるのではないでしょうか。
■あぶないパスワード運用の話 サーバー担当:安達

ここのところ、企業からの情報漏洩が相次いでいます。
今週は大手プロバイダのOCNから約400万件のメールアドレスとパスワードが漏洩したとの発表がありました。

NTT Com の「OCN」、最大400万件のメールアドレスと暗号化済みパスワードが流出
http://japan.internet.com/webtech/20130725/2.html

また、5月にはヤフーから約2200万件のID(そのうち150万件はパスワードも)が流出した事件もありました。
このように、最大手クラスのプロバイダーやネットサービスですらも、完璧に情報を守ることができなくなっており、ユーザーの個人情報は常に危険にさらされているというのが2013年の実状です。
この点はぜひ認識しておくといいと思います。

今回のOCNでの漏洩は、攻撃者によりサーバー上に不審なプログラムが設置され、そのプログラムにより情報を送信させられていました。
今回流出したパスワードはハッシュ化という形で暗号化されており、パスワードそのものではありません。
しかし方法によっては、ハッシュ化されたパスワードから生のパスワードを復元することは不可能ではなく、
攻撃者が完全なIDとパスワードの組み合わせを手に入れてしまうことがあります。

ここで問題となるのが、二次的な被害です。
どのサービスにも同じパスワードを使うというパスワード運用をしている人の場合、
一つのサービスから情報が漏洩してしまうと、連鎖的に他のサービスにもログインされてしまう可能性があります。
こうなってしまうともう歯止めが利かなくなり、そのユーザーは住所・氏名・電話番号から趣味嗜好、通販の購入履歴、場合によってはクレジットカードの情報まで丸裸にされてしまうでしょう。

こうならないためにも是非とも同じパスワードを使い回しせず、サービス毎にパスワードは個別のものを使ってください。
一昔前は「パスワードを何かにメモするのは危険だから覚えられる範囲にしておこう」という考え方もあったのですが、今は状況が変わっています。

また、OCNの場合は情報を送信するプログラムを設置されたことによってパスワードが漏洩しましたが、
公開されている情報からパスワードを類推して総当たりで試すことによってログインされてしまうことがあります。

たとえばyamada@hogehoge.comというメールアドレスがあったとして、このメールのパスワードが「yamada」だったり、「hogehoge」だったりするとあっさりとログインされてしまいます。
こんな単純なパスワードにする人がいるわけないと思うかもしれませんが、何かの拍子でそういうパスワードが存在してしまっていることがあるのです。
こういったメールアドレスが部外者に一旦ログインされてしまうと、そのメールアドレスはたいていスパムの踏み台となり、毎日大量の迷惑メールを送り続けます。
こうなって初めてユーザーや管理者が気付くことになるわけですが、気付かないままメールをこっそりのぞき見され続けていた、という状況になるよりはマシなのかもしれません・・・。

被害を拡大しないためにもパスワードは以下のように運用していきましょう
・アルファベットと数字が混じった最低8文字以上の文字列にする
・サービス毎に個別のパスワードを使用する
・パスワードの中に公開された情報(ユーザー名やドメイン名、本名、会社名等)を含んではいけない
DJポリスがどうしても気になってしまうデザイナーの安藤です。

さて今回は、企画書作成や報告書など、
簡単な書類作成などしているときに、
デザインの構成で悩むことが少なからず
あるかと思います。

そんな時にオススメしたい事ですが、
まずは情報を整えることを意識すると良いです。

具体的にどうするかというと、
四角でまとまり別で構成すると
考えやすくなるかと思います。

情報を揃えて整えるポイントですが、
余白を揃える、空を揃えるなど、
気づく部分は揃えてしまいます。

次に共通項目をまとめます。
共通情報は、まとまり別にしておくと
見た目にも区別がしやすくなり、
伝わりやすくなるかと思います。


次におおまかにまとまりができたら、
一番伝えたい内容を大きくしたり、
表現に図や画像など入れたり、
スペースがなければ色でまとめるだけでも
情報が伝わりやすくなるかと思いますので

デザインの情報構成に悩んだらまずは、
情報を整えるところから調整みて下さい。