サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
www.actzero.jp
お久しぶりです、デザイナーのスライです。 怒りのUI第9回目「ページネーションのUIを考える」です。 ページネーションとは ブログ記事やサイト内検索など、動的に生成されるページにおいて、 ナビゲーションの役割を果たすUIのことを指します。 ページネーションのおさらい WEBサイトにおいてページネーションを使用する機会は多くあると思いますが、 ページネーションをデザインする際のポイントをおさらいしましょう。 クリッカブルな要素は大きく、認識しやすく 誤クリックを防ぐためにも、クリッカブルな要素は十分な大きさを確保しましょう。 また、クリッカブルな要素だとすぐ認識できるデザインにしましょう。 (アンダーラインを入れる、テキストの色を変える、ボタンにする、など) 現在地を認識しやすく ナビゲーションであることから、現在地をすぐ認識できるデザインにしましょう。 (テキストの色を変える、級数を大きく
エンジニアのタケヨシです。 名前だけでも覚えて帰ってください。 この記事は 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つであ
メガネを掛けてテレビを見ると、奥行きを感じる見た目になる「3Dテレビ」。2010年頃に大きな流行となった記憶があるかと思います。しかし、ここ最近その存在自体をすっかり忘れていたのは私だけでは無いと思いますが、2017年、3Dテレビはひっそりとその姿を消すことになりました。 It’s been a walking corpse for the last couple of years, and now 3D TV finally looks dead. LG and Sony, the last two major TV makers to support the 3D feature in their TVs, will stop doing so in 2017. None of their sets, not even high-end models such as their new
先月24日、英ロンドンに本社を置くソーシャルメディア・コンサルティング企業「We Are Social」から、最新の調査報告「Digital in 2017 GLOBAL OVERVIEW」が発表されました。 ここ数年、毎年出されている統計情報で、これまでは世界規模でのWebユーザーの統計数値や、世界の30ヶ国の国別のインターネット利用状況などがまとめられていましたが、今年は”GLOBAL OVERVIEW”がテーマのようで、世界のインターネット利用状況の数値に主眼を置いた内容となっています。今日は、この統計の中からいくつかのデータを抜粋して、2017年最新の、世界のネットやSNSの利用状況について見てみることにしましょう。 世界の一般的なインターネット利用概況 世界の人口が昨年から約1.5億人増加し、約74.7億人になりました。そのうち、日常的にインターネットを利用しているユーザーは約3
新サービスの登場や機能追加など、昨年も目まぐるしい変動を見せた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デザインに関
こんにちは。アクトゼロ田中です。 リスティング広告を自社で運用されている方は非常に多いと思います。簡単に始められるリスティング広告ですが、細かな設定ができるのはご存知でしょうか? この設定を行うだけで、一歩進んだ運用ができるはずです。 ▼その他のリスティング広告に関する記事も見てみてください リスティング広告に関する過去記事 広告のターゲット地域の設定 例えば、神楽坂のお花屋さんがリスティング広告を出稿したとします。そのお店はECショップをやっているわけではありません。 そんな時、札幌でこの広告を見ても、あまり意味がありませんよね? そんな地域密着型のビジネスを展開されている方には絶対に設定した方が良い『ターゲット地域』の設定です。 また、「ウチのビジネスは全国展開だから!」という方も、必ずチェックしてください。なぜかと言うと、「国」の設定もあるからなのです。 お店の名前がローマ字の方、要
こんにちは、デザイナーの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アニメの作り方を3つご紹介します。 【1】キラキラ記号を明滅させる キラキラ記号を大・中・小とご準備ください。 これを全てセンター揃えにし、 大→中→小→中→大…とループさせるようします。 フレームアニメーションにするとこう。 するとこうなりますので、 コレをお好きな位置に配置し、光方をランダムにすればキラッキラしますよ~ 【2】つるっとした光を走らせる ちと2行の上細身のフォントでグッときにくいですが。。 白い縦長のシェイプに、光彩をつけたものをご用意。 お好みによってぼかしたり、不透明度を調整してあげてもいいです。 これを増やして等間隔に、光らせたいものの上に並べます。 あとはマスクしてあげて、 先程のフレー
こんにちは。Instagramは発信するよりも見る派のアクトゼロの高寺です。 12/1・2の2日間、東京国際フォーラムでデジタルマーケティング関連の展示会・セミナーイベント「adtech tokyo 2015」が開催されました。約120社が出展し、約1万5,000人が来場する、この分野では国内最大規模のイベントです。私も昨日訪問し、様々な情報収集を行ってきました。 各出展ブースではプレゼンテーションを行っており、様々な情報を発信しています。中でも人を集めていたのはFacebookのブース。私が訪問した時、「Japanese on Instagram ~日本におけるInstagramの実情」というテーマでプレゼンテーションが行われていました。なかなか日本国内でのデータが少ないInstagramの、最新のデータが発表されていました。 講演者ご本人に許可をいただきましたので、そこで発表されていた
こんにちは。アクトゼロの田中です。 ネットショッピングが一般的になったり、WEBが生活の一部になってから、「入力フォーム」は見慣れた存在になりました。でも、入力フォームを埋めるのって結構めんどくさく感じたりしませんか? よく利用するショッピングサイトであれば、ワンクリックで購入できたり、と入力を省けることが多いですが、初回の入力は結構めんどうです。 何かのサービスの申し込みフォームだったらなおさらです。「特に必要じゃないし」と思われてしまったら、申込みをしてくれません。 そうなんです。「入力フォーム」の大前提は、、、 お客様も「めんどくさい!」と思っている ということです。これを認識して入力フォームを作る必要があります。ではその具体的なポイントをまとめてみましたので、お付き合いください。 『会員ID=メールアドレス』にすべし 少々古めなフォームにはまだご健在かもしれませんが、最近見かけなく
こんにちは、あゆこです。 いよいよiphone6sが発売されましたね! 私の周りでも購入者の報告が続々上がってきています。 世間ではスマホユーザーが増加の一途を辿り、 いよいよモバイルファーストの重要性に注目が集まっています。 そこで振り返りの意味もこめつつ、スマートフォンの現状と、「モバイルファースト」を意識したデザインを制作する上で、気をつけたいことをザッとまとめてみました。 そもそもモバイルファーストとは? モバイルファーストとは、Webサイトやソフトウェアの開発・運営方針の一つで、スマートフォンなどの携帯端末向けの版をパソコン向けなどより先に、あるいは同時に公開すること。また、サイトやソフトの機能や表示、操作方法を設計する際に、携帯端末での使いやすさを常に優先すること。 IT用語辞典より 今まではPCを先行してデザインをつくり、その後量産的にモバイル版のデザインをつくる…ということ
こんにちは。あゆこです。 先日潮干狩りに行ってきました。 旬のアサリ、とっても美味しかったです! 翌日から筋肉痛でもだえ苦しむおまけ付ですが、楽しかったです! さて、私もとうとうデザイナー3年目に突入しました。 メンバーも増えて、デザイナーチームでもだいたい真ん中くらいの位置に。 2年目は1年目とやることが大きく変わったかというとそうでもないけれど、 やはり環境や作業内容に変化がありました。 今回はそんな変化をさらーっとご紹介します。 →ちなみに1年目の記事はこちら 1.上司が去っていく 1年目で直属の上司がつき、 それこそマンツーマンでデザインや進行、勉強の仕方や物事の考え方などを 教えていただきました。 右も左もわからなかった状態からそこそこ仕事をこなせるようになり、 漸く右腕とは言わずともチームとして機能できるようになってきたかも! これからもどんどんいろんなことを吸収していくぞ!
こんにちは。あゆこです。 シルバーウィークが待ち遠しいです! 今回は自分のためにも、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で最も重要なのが、自らのタイムラインへの投稿によって、繋がりを持った友達やファン(ページへいいね!したユーザー)のアカウント上にその投稿が配信される、ニュースフィードという仕組みです。 そのニュースフィード上に流れてくる投稿に対し、いいね!したり、コメントしたりすること
こんにちは。アクトゼロの山田です。 最近では有名人が投稿する写真がニュースになるなど、一般的な認知度が高まってきたInstagramですが、企業のマーケティング活用という観点から見た時には、日本国内ではまだまだこれから…といった温度感のように感じています。 企業アカウントを立ち上げて、魅力的な写真を投稿していくというシンプルな活用方法だけではなく、こういったケースもあるというのをニューヨークのメトロポリタン美術館を例にご紹介できればと思います。 ひとりの写真家から始まった取り組み アメリカの写真家Dave Krugmanという人から、今回のケースはスタートします。 彼のInstagramアカウントを見て分かる通り、まさにプロの写真家レベルという感じで、とても印象的な写真が並んでいます。 Instagramに魅了され、素晴らしい写真をアップする彼は、Instagram上で抜群の存在感を発揮し
こんにちは、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 ———————————– 商用個人にかかわらず利用フリーで
アクトゼロの黒沼(@torukuronuma)です。 Twitterが公式でツイートをまとめることが出来るサービス「Curator(キュレーター)」を開始します。 メディア企業の皆様がCuratorを使うことによって、より関連性と質の高いツイートを発見し、そのツイートをウェブサイトやモバイルアプリ、テレビ番組などで簡単に表示できるようになります。テスト段階でCuratorをご利用いただいた方々は視聴者との強いエンゲージメント、参加を促し、興味を引くことができました。これらの結果を元に、ニュースメディア、制作会社、放送局、自治体、コンサート会場を含む世界中のメディア企業の方々が無料でお使いいただけるようにいたしました。 Curator : ツイートを見つけ出し活用するためのキュレーションツール | Twitter Blogs まだ日本では提供開始されておらず、限られたメディア企業向けに限定提
こんにちは、デザイナーの小林です。 新年度に入り、新たにwebデザイナーとしてキャリアをスタートした方もいることでしょう。今回は、そんな新人の方にオススメしたい書籍をご紹介したいと思います。 (書籍名のリンク先はAmazonになります) デザイン編 How to Design いちばん面白いデザインの教科書 本書は、グラフィックデザインの現場で必要になる知識と考え方、それを形にするためのアプリケーションの技術の両方を、実践的なプロセスでわかりやすく解説したデザインの教科書です。 東京造形大学で教鞭をとるカイシトモヤが、デザイナーとして、また教員として培ってきた現場のリアルなデザインをこの一冊にまとめました。 webというよりはグラフィックデザイナー向けですが、その分、デザインに関して基本からしっかりと解説されており、体系的に学べる内容です。 「形」「色」「文字」「写真」「レイアウト」「印刷
次のページ
このページを最初にブックマークしてみませんか?
『アクトゼロ|SMMやSEMを中心としたデジタルマーケティング会社』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く