はてなブックマーク

エンジニアのタケヨシです。 名前だけでも覚えて帰ってください。 この記事は JavaScript Advent Calendar 2016　19日目の記事です。 普段からJSはjQueryを使って書いてはいるのですが、近年のフレームワーク、ライブラリには全然触れていなかったので、今年は少しづつでもいいから触ってみようと思いBackbone.js,Angular2,Vue.jsなどのチュートリアルをやって現在も勉強中です。 そこで今回は勉強も兼ねて、シンプルなじゃんけんゲームを作ってみたので、作成したものの紹介とWebサイト制作のJSとの違いなど感じたことをまとめてみました。 今回はVue.js v2.0で作ってみました。 Vue.js v2.0は10/1リリースされたようです。自分は1にも触れていなかったのですが、公式サイトを見たところ既にドキュメントが日本語なので、学ぶハードルの1つであ

新サービスの登場や機能追加など、昨年も目まぐるしい変動を見せたSNS業界。 かつて抱いていたSNSの利用イメージというのも、気づけばだんだんかけ離れてきつつあるかもしれません。 基礎知識のおさらいもふまえ、今のSNSの実態をデータで見直していきましょう。 「SNSは若者が使うもの？」 いいえ、今では中高年の世代にも拡大し、SNS利用は誰でも当たり前な時代になっています。 下記の調査によるとSNS利用者は年々増加しており、今年末にはなんと7割以上が利用している見込みに。 出典：ICT総研「2016年度 SNS利用動向に関する調査」 次に、年代別でどのSNSを利用しているのかについてはこちらの図を参考にしてみましょう。 出典：総務省「社会課題解決のための新たなICTサービス・技術への人々の意識に関する調査研究」（平成27年） 利用率が最も高いのはやはり20代以下。年代を追うごとに利用率は減少傾

写真の中の君は、笑っている お疲れ様です。NOEです。 本日は、写真をレトロ風に加工するチュートリアルを紹介します。ではさっそく始めましょう。 スタートライン 今回使わせて頂く写真は、こちらです。ポッキーを唇に当てられていますね。 ①トーンカーブ トーンカーブのレッドとブルーを調整します。 ②カラーバランス カラーバランスを調整します。 レッドを(+10)、マゼンタ（-8） ③レベル補正 ブラックの出力レベルを40にしてください。 ④レイヤーを重ねる 今あるすべてのレイヤーを複製、そして結合します。複製したレイヤーにぼかし(ガウス)で半径20pxをかけてください。 そしてソフトライトにします。 ⑤ベタ塗りを重ねる ベタ塗りを黒でかぶせます。ぼかしブラシで四角以外を消します。不透明度は30%くらいにしてください。 ⑥光漏れを描く ぼかしブラシ(オレンジ色)で円をバランスよく配置してください。

この他にも様々なAPIがあります、詳しくは公式のGoogle Maps APIのページをご覧ください。 今回は一般的な、webサイトで利用するためのGoogle Maps JavaScript APIを用いて話を進めていきます。 デモページの紹介 前置きが長くなりましたが、Google Maps APIを使ったデモページをご紹介します。 デモページを見る 全国の地方自治体を上記3サイトにおける店舗と見立てて実装しました。 （上記3サイトと比べるとだいぶ機能が削ぎ落とされていますが。） 挙動の説明等はデモページ上に記載していますので、こちらでは具体的な実装方法について順番に説明していきたいと思います。 なお、実装にはHTML、CSS、JavaScriptとjQueryの基礎知識があれば大丈夫だと思います。 1.必要なデータを準備する まず、マップ上に表示する建物のデータが必要です。今回の実装

こんにちは、デザイナーのスライです。 日サロ行ってるの？とよく聞かれます。 夏ですね。。。 さて、怒りのUIでは過去にiOSとAndroidに使用されている デザインガイドラインについて記事を書きました。 【怒りのUI】iOSヒューマンインターフェイスガイドラインから学ぶUI設計 【怒りのUI】Googleのマテリアルデザインから学ぶUI設計 今回はそれらを踏まえて、標準UIはそれぞれどう違うか、設定画面を主にまとめてみました。 怒りのUI第5回目「iOSとAndroidの標準UIを比較してみた」です。 （※検証環境：iOS 9.3.2、Android 5.1.1） トグルスイッチ トグルスイッチは、機能のオン・オフを設定する際に利用されます。 iOS、Androidのどちらも殆ど同じデザインです。 実生活で利用する照明などのスイッチと同じで、 右側がオン、左側がオフになっています。 どち

Facebookを利用する多くの一般ユーザーは、そのほとんどがスマートフォンでアクセスしていると考えられますが、企業ページを運用する担当者は、比較的パソコンからのアクセスが多いのが一般的です。そもそも、会社からアクセスしているからなのですが、そんな企業担当者界隈で、PC版Facebookページのデザインが変わったことが、静かに（？）話題になっています。あくまでも静かに…です。 昔風？に戻ったレイアウト 長らくFacebookページのタイムラインは、カバー写真やプロフィール写真、そして各種ページ内メニューが配置されたヘッダーエリアと、それより下は2カラムに分かれ情報と投稿が並列に並ぶスタイルを通してきていました。※下が以前のデザイン そして、ここにきて大きくデザインが変わることになったのですが、そのデザイン、もといレイアウトが、2010年頃のFacebookページのようなのです。※この下のイ

こんにちは、デザイナーのスライです。 GWはElectric Zooに行ってきました。 アオキ最高!!Cake Me!!! さて、前回のコラムではiOSヒューマンインターフェイスガイドラインについて書きました。 iOSを書いたならば、こちらも書かざるを得ません。 怒りのUI 第三回目「Googleのマテリアルデザインから学ぶUI設計」です。 マテリアルデザインとは 「Material Design」は、Googleが提唱しているデザインガイドラインです。 スキューモーフィズムを排したデザインは、フラットデザインに通じるものがあります。 が、マテリアルデザインには「光と影」という概念が存在します。 各要素はシンプルでありながら、フラットデザインの弱点である「押せる感」を、 「光と影」で補ったのが最大の特徴と言えます。 それでは、以下でマテリアルデザインの概念について説明していきます。 マテリ

こんにちは、NOEです。 今回紹介するのは、金文字の作り方です。実は1年程前にもお話ししているのですが、 http://www.actzero.jp/developer/report-13370.html 以前より、若干POPな金を作る事が出来ましたので紹介します。 <準備するもの> 金のグラデーションパターン(コリスさまで紹介されています) http://coliss.com/articles/freebies/freebies-photoshop-metal-gradient-by-roula33.html さあ始めよう 先日、ドラマを見ていて、この男優さんは演技も歌も出来て凄いなと思いました。 何でも出来るなぁ、光ってるなぁ、キラッキラやなぁ、と思いましたので、今回は、 まさはるさんと書きました。(フォントサイズ110px) ①グラデーションを、お付けになってくださいませ(少しお暗い

こんにちは、デザイナーのスライです。 初々しい新社会人の姿が眩しいです。。。 突然ですが、Webデザイナーのみなさんに質問です。 モバイルファーストを意識していますか？ モバイルファーストと聞くけど、作業環境はPC、見るサイトもPCサイト。 何となく、ふわふわした印象を持つWebデザイナーの方は多いと思います。 今回は、そんなモバイルファーストな設計に関連することを書こうと思います。 怒りのUI 第二回目「iOSヒューマンインターフェイスガイドラインから学ぶUI設計」です。 iOSヒューマンインターフェイスガイドラインとは 正式名称「iOS Human Interface Guidelines」は、 AppleがiOSアプリ開発者向けに公開しているガイドラインです。 モバイルファーストなUI設計を実現するためのヒントが、 このガイドラインに書かれています。 このコラムではWebデザインに関

こんにちは、デザイナーのNOEです。 今月から月一で「スマホデザイン研究所」を連載していくことになりました。 スマホデザイン制作時に、「フォントサイズや行間はどうしよう？」「マージンは20PX、30PXどっちが良いか？」「タップサイズの大きさは？」など迷う事があります。 そこで、スマホのデフォルトの純正アプリや有名アプリの文字サイズ・行間・マージンなどを調べて最適なフォーマットは何なのか探っていきたいと思います。 調査結果から最適サイズを導きだしPSDモックを作成します。 第一回目は、「有名ニュース・キュレーション系アプリ徹底研究」です。(主にリストデザイン) 検証方法 iPhone6でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。解像度を横幅640pxに設定） スマートニュース タップ領域のサイズは統一されています。記事カテゴ

今年の1月27日、英ロンドンに本社を置くソーシャルメディア・コンサルティング企業「We Are Social」から、最新の調査報告「Digital in 2016」が発表されました。 昨年の「Digital, Social & Mobile in 2015」からタイトルが改められ、より広いデジタルマーケティング領域に関する統計調査結果となっているようです。（参考：「2015年・最新の統計情報から見る、世界のネット・SNSの利用状況」2015.1.28） インターネットやソーシャルメディアの利用状況の傾向の統計が、世界的規模での傾向だけでなく、30カ国の国別のデータも掲載されており、通常あまり目にできない国の情報も載っているため、非常に興味深い内容となっています。今日は、この統計の中から抜粋して、2016年最新の、世界のネット・SNS利用状況について見てみることにしましょう。 世界の傾向 ま

こんにちは、あゆこです。 インフルエンザが周りで流行りに流行っていて、恐怖です。 みなさまもご自愛くださいませ。。 さて、今回はphotoshopでさくっとつくれる キラキラGIFアニメの作り方を３つご紹介します。 【1】キラキラ記号を明滅させる キラキラ記号を大・中・小とご準備ください。 これを全てセンター揃えにし、 大→中→小→中→大…とループさせるようします。 フレームアニメーションにするとこう。 するとこうなりますので、 コレをお好きな位置に配置し、光方をランダムにすればキラッキラしますよ～ 【2】つるっとした光を走らせる ちと２行の上細身のフォントでグッときにくいですが。。 白い縦長のシェイプに、光彩をつけたものをご用意。 お好みによってぼかしたり、不透明度を調整してあげてもいいです。 これを増やして等間隔に、光らせたいものの上に並べます。 あとはマスクしてあげて、 先程のフレー

こんにちは。Instagramは発信するよりも見る派のアクトゼロの高寺です。 12/1・2の2日間、東京国際フォーラムでデジタルマーケティング関連の展示会・セミナーイベント「adtech tokyo 2015」が開催されました。約120社が出展し、約１万5,000人が来場する、この分野では国内最大規模のイベントです。私も昨日訪問し、様々な情報収集を行ってきました。 各出展ブースではプレゼンテーションを行っており、様々な情報を発信しています。中でも人を集めていたのはFacebookのブース。私が訪問した時、「Japanese on Instagram ～日本におけるInstagramの実情」というテーマでプレゼンテーションが行われていました。なかなか日本国内でのデータが少ないInstagramの、最新のデータが発表されていました。 講演者ご本人に許可をいただきましたので、そこで発表されていた

こんにちは。あゆこです。 シルバーウィークが待ち遠しいです！ 今回は自分のためにも、Webフォントアイコンについてまとめておきます。 1.Webフォントアイコンとはなんぞや 言わずもがな、Webフォントにテキストではなく、アイコンを表示させたものです。 Webフォントがわからないっというときはググッてみてね。 ■メリット ・拡大縮小が容易。なので高解像度のデバイスでも綺麗に表示される。 ・CSSでサイズ・色・影・アニメーション等の管理が簡単。効率が良い。 ■デメリット ・古いブラウザで使えない場合がある。 ・基本セット使用なので、1つだけアイコンを使うよりは容量が重くなる 2.Webフォントアイコンセット セットで使えるのでデザインが統一できたり、内容に合ったアイコンが配置できてとっても助かります。 ※念のため、使用の際はダウンロード元のライセンスを必ず確認してくださいね！ Font Aw

ここ最近、急激に注目され始めているInstagram。写真などの画像・動画によるSNSで、スマホで撮影した画像をアプリ上で手軽に加工ができ、簡単にアート作品のような画像を共有できるサービスです。 日本でもモデルやアーティストが利用することもあり、いわゆる「おしゃれ好き」なファッション感度の高いユーザーが多く集まっています。また、ユーザーの過半数は10代～20代と、年齢層は若い世代が多いソーシャルメディアという点も特徴的です。 昨日の田中の記事（写真共有はInstagramに軍配・・・Google+が縮小傾向）でも触れていますが、現在利用しているSNSは何かという調査の結果、LINE/Facebook/Twitterという回答が多かったものの、インスタグラムは飛躍的に利用者を伸ばしていることが報告されています。 こうした動きに対し、ソーシャルメディアに対して感度の高い企業も注目しています。2

ソーシャルメディアの運用、例えばtwitterのアカウント運用や、facebookページの運用を行っていると、当然、定期的に情報発信していく必要があります。発信するからには、なるべく多くの人からリツイートされたり、いいね！を受けることができるコンテンツを提供したいと思うのは、運用担当者であれば誰しもが思うことでしょう。特に、近年ではコンテンツマーケティング等が注目されており、SNS上で発信するコンテンツでも、その”質”が問われています。 多くの反応を受けるためにもう一つ重要なポイントが、情報を投稿するタイミングはいつ頃が良いのか、ということが挙げられると思います。そのためには情報を届けたいターゲットが集まるSNSの選定が必要で、ソーシャルメディア毎の特性やユーザー層の把握が大切になってきます。 学生や主婦に比べ、会社員は「Facebook」をよく利用している傾向 株式会社ジャストシステムが

こんにちは。アクトゼロの山田です。 このところプランナーズブログでは、Facebookが続きますが、今日もFacebookの記事になります…。 といっても、Facebookを企業利用する際の考え方を大きく変えるかもしれない、なかなか衝撃的な話題です。 Facebookはソーシャルメディア時代における企業ネット戦略の中で、非常に重要な役割を担っています。一時期、“Facebookは終わった”というような風潮もありましたが、ふたを開けてみると、終わるどころか、もはや欠かすことのできない定番の存在になっています。 Facebookで最も重要なのが、自らのタイムラインへの投稿によって、繋がりを持った友達やファン（ページへいいね！したユーザー）のアカウント上にその投稿が配信される、ニュースフィードという仕組みです。 そのニュースフィード上に流れてくる投稿に対し、いいね！したり、コメントしたりすること

こんにちは、NOEです。 今回は、デザインの時に凄く助かる、 助けてもらっているフリー素材のサイトをご紹介します。 (made in japan) 1:ヒューマンピクトグラム2.0 ピクトグラムや、データなどをイラスト交えて作成する時に助けてもらっています。 http://pictogram2.com/ 2:フキダシデザイン 吹き出し使うときは、こちらに助けてもらいます。 http://fukidesign.com/ 3:やじるし素材天国 矢印の種類多いです、助けてもらいます。 http://yajidesign.com/ 4:シルエットデザイン バナーなどで、シルエットを使う事が多いので助けてもらいます。 http://kage-design.com/ 5:イラストAC 多くの作家さんの作品があるので、助けてもらっています。 http://www.ac-illust.com/ 6:いらす

こんにちは、haruです。 GWに東京国立博物館にて展示されている鳥獣戯画展に行ってきました。 長期休暇中なのもあり、想像以上に混んでおり、 普段そこまで出歩かない身としては体力的に厳しかったです… メインの展示物は可愛らしく（蛙の親子とか！）、 カッコよく（麒麟とか！）、良いものでした。 もっとじっくり見たかったのが心残りです。 さて今回はレトロなゲームを連想させるドット絵素材を用意しました。 縮小して使う場合、10％、50％など10の倍数で縮小するとより綺麗に使えるかと思います。 Photoshopで拡大するならば、環境設定＞画像保管方式を 「ニアレストネイバー法」にすると綺麗な状態を保てます。 詳しくはこちらの記事を参照してくだされば… 原寸大サイズはこちら 歩く素材もあります ———————————– 形式：png,gif ———————————– 商用個人にかかわらず利用フリーで

こんにちは、デザイナーの小林です。 新年度に入り、新たにwebデザイナーとしてキャリアをスタートした方もいることでしょう。今回は、そんな新人の方にオススメしたい書籍をご紹介したいと思います。 （書籍名のリンク先はAmazonになります） デザイン編 How to Design いちばん面白いデザインの教科書 本書は、グラフィックデザインの現場で必要になる知識と考え方、それを形にするためのアプリケーションの技術の両方を、実践的なプロセスでわかりやすく解説したデザインの教科書です。 東京造形大学で教鞭をとるカイシトモヤが、デザイナーとして、また教員として培ってきた現場のリアルなデザインをこの一冊にまとめました。 webというよりはグラフィックデザイナー向けですが、その分、デザインに関して基本からしっかりと解説されており、体系的に学べる内容です。 「形」「色」「文字」「写真」「レイアウト」「印刷