バーチャルYouTuber「田中ヒメ」はどうやって生まれたのか｜HimeHina Channel 前編 | デザインってオモシロイ -MdN Design Interactive-バーチャルYouTuber「田中ヒメ」はどうやって生まれたのか｜HimeHina Ch
【HimeHina Channel 前編】バーチャルYouTuber「田中ヒメ」はどうやって生まれたのか 取材・文：石神仁紀 バーチャルYouTuber、略してVTuber。YouTubeなどの動画サイト上でタレント活動するCGキャラクターが多数のフォロワーを集め、VTuberチャンネルが急激な増加をみせている。ユーザーローカルの調査によればVTuberは2017年12月頃から急増し、2018年2月に500人、7月10日には4000人を突破した。 VTuberの一人である「田中ヒメ」が世に出たのは2018年3月18日。彼女のパートナーである、同じくVTuberの「鈴木ヒナ」が加わったのは5月29日。バーチャルYouTuberとしてはどちらかと言うと後発だが、ハイテンションなトークと自然なCGアニメーションでファンを増やし、9月12日現在、彼女たちを擁する「HimeHina Channel」
一度使うとやめられない!? 機能とデザインに優れたPCリュックまとめ - MdN Design Interactive
近年は会社勤めの人だけでなく、フリーランスのクリエイターから学生まで、実に幅広い層がノートPCやタブレットを日常的に持ち歩くようになった。比較的重い荷物であるノートPCを気軽に運べて、スポーツ自転車にも乗ることができるリュックは、そんなライフスタイルにぴったりの相棒となるだろう。今回は、ノートPCやタブレットの持ち運びにすぐれたリュックをまとめて紹介したい。 2019年6月3日 TEXT：佐藤勝 ※当記事は2015年6月公開した内容を再編集したものです ▷ メンズ バッグ PMT／KAVまず最初に、デザインで個性を主張したい人向けのプロダクトとして、ハワイ発のサーフブランド「DAKINE（ダカイン）」をご紹介。
UI/UXがイケてる！おすすめスマホアプリ - 第6回 National Geographic Atlas - MdN Design Interactive
Amebaのクリエイティブディレクターが徹底考察！ UI/UXがイケてる！おすすめスマホアプリ 第6回 National Geographic Atlas 2015年5月29日 TEXT：鈴木伸緒（株式会社サイバーエージェント） より良いユーザー体験を提供するうえで、スマホアプリにおけるUIの工夫やユーザーの心的効果を考慮したデザインなどを、サービスの機能ごとに紹介していく本連載。第6回目では、National Geographic公式アプリのNational Geographic World Atlasを取り上げる。 National Geographic World Atlasとは、世界の統計や各国の情報が提供されている世界地図アプリだ。National Geographicがもつ豊富なデータを、UI・インタラクションを使って視覚的に表示している。 アプリのデザイン・開発したのはRal
粘着クリーナー「コロコロ」のブランドサイトがリニューアル - MdN Design Interactive
株式会社ニトムズは、粘着カーペットクリーナー「コロコロ」の商標登録を出願してから30周年を迎えることを記念して、同製品のブランドサイト「コロコロ ラボ」をリニューアルした。 同サイトでは、新コンテンツとして、コロコロの歴史を紹介する「おしえてコロコロ」や、使い方を発信する「こんなときコロコロ」、ファンと一緒に作っていくページ「もっともっとコロコロ」などを設けている。同社は同サイトを通じて、今後もコロコロのファンとのコミュニケーション強化を図っていくとコメントしている。
UI/UXがイケてる！おすすめスマホアプリ - 第5回 Reuters TV - MdN Design Interactive
Amebaのクリエイティブディレクターが徹底考察！ UI/UXがイケてる！おすすめスマホアプリ 第5回 Reuters TV 2015年4月20日 TEXT：鬼石広海（株式会社サイバーエージェント） より良いユーザー体験を提供するうえで、スマホアプリにおけるUIの工夫やユーザーの心的効果を考慮したデザインなどを、サービスの機能ごとに紹介していく本連載。第5回目では、Reuters TVの公式アプリを取り上げる。 Reuters TVは、動画形式のニュースアプリだ。現在さまざまなニュースキュレーションアプリがあるなか、このアプリは外部コンテンツの掻き集めではなく、すべて自社制作のコンテンツで成り立っているのが特徴である。さらに、テレビのように万人が同じニュースを閲覧するのではなく、個人が受け取るニュースをカスタマイズできるという、アプリならではのコンセプトでつくられている点にも注目したい。
今日のGoogleロゴはクロード・ドビュッシー生誕151周年 - MdN Design Interactive
Googleは、2013年8月22日のロゴをフランスの作曲家、クロード・ドビュッシー生誕151周年を記念したデザインに変更した。 クロード・ドビュッシーは1862年、サン・ジェルマン・アン・レー生まれ。クロード・ドビュッシーといえば独特の作曲手法により印象主義の代表的な作曲家として挙げられることが多いが、近年では象徴主義に位置づけられることもある。代表作は管弦楽作品「牧神の午後への前奏曲」「夜想曲」「海」など。ほかにもピアノ曲や歌曲などでも数々の名曲を残している。 今日のGoogleロゴは、風船に描かれた再生ボタンをクリックすることで、クロード・ドビュッシーの名作「月の光」とともに、夜の街並みが映し出される。しばらくすると船を漕ぐ男女があらわれ、同時に雨が降り出す。そして…結末はぜひみなさんの目でご覧いただきたい。
ゼロからはじめるHTML5でのサイト制作／最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう - MdN Design Interactive
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
色彩検定で"もっと"デザインスキルを磨こう！ - MdN Design Interactive
デザインワークにおいて、その印象を大きく左右する視覚情報のひとつが色彩である。本記事では、プロのデザイナーにとって「色」がなぜ重要であるかを、あらためて考えていく。さらに、色に関する知識と技能を問う検定試験「色彩検定」の出題問題や、色彩講師のインタビューも紹介。色彩について興味がある、あるいは今まさに色彩検定の資格取得を目指し勉強中という人は、ぜひ参考にしてほしい。 私たちの生活で目にするさまざまなモノには色が存在すると同時に、その色である理由もきちんと存在する。それだけに、ビジュアルデザインを手がけるクリエイターは、色彩の使い方ひとつで制作物の完成度がまったく変わることを念頭に置く必要がある。しかし色彩について系統立てて考えず、感覚やセンスに頼っていることはないだろうか？ 自分の得意な配色やトレンドカラーを取り入れることは手軽に進められる反面、感覚的に好みでない色は避けてしまう傾向に陥り
2色刷り風のレトロタッチで雰囲気よく仕上げる - MdN Design Interactive
2色刷り風のレトロタッチで雰囲気よく仕上げる 制作・文＞fukkie. URL＞www.fukkies.com/ 使った道具や素材＞Photoshop/Illustrator/絵の具/かすれのテクスチャ まず、イラストの方向性や構図を決める。イメージが固まったらIllustratorを起動し、楕円や四角形を組み合わせてバスなどを描いた 1-1 。このとき楕円形ツールや長方形ツールなどは使わず、ペンツールでざっくりとしたラインを描き、温かみを出している 1-2 。また各モチーフごとにレイヤーを分けた。
MdN Design｜総合情報サイト
Node.jsのインストールと 下準備 Node.js のインストールは、UbuntusやMacを利用するのが簡単だ【4】。ちなみに今回はMacとパッケージ管理システムMacPortsを利用してインストールしている。MacPorts のインストールは、Web サイトからpkg 形式のインストーラが配布されているので参照して欲しい【5】。 Node.jsには開発を便利にするパッケ ージが多数配布されている。これらの一括管理には、パッケージ管理システムnpm(node package manager)【6】を使うとよい。npmはMacPortsではインストールできないため、curlを利用してインストールする。curlのインストールはMacPortsで可能だ【7】【8】。 Node.jsでWebSocketを利用したい場合、Socket.ioが便利だ【9】。Node.jsのパッケージとして配布さ
MdN Design｜総合情報サイト
text-shadowはその名のとおり、テキストに影をつけるプロパティだ。うまく使えば画像を使わずとも、テキストを際立たせることができる。運用の効率化や、テキストコピーができるなどメリットも多い。 基本的な指定方法は、テキストから影までの距離（縦、横）とぼかしサイズ、影の色を指定して調整する【1-1】。CSS3でよく使われる、-moz-や-webkit-などのベンダープレフィックスの記述は、textshadowでは必要ない。カンマで区切れば、1つの要素に対して複数の影を指定できる【1-2】。また、影の色はrgba（半透明）で指定することもできる。影を半透明にしておけば、どのような背景色でも自然になじませることができるので便利だ【1-3】。 【1-1】「ぼかしサイズ」と「影の色」は省略可能 【1-2】カンマ(,)区切りで複数指定できる。工夫次第で複雑な表現も可能だ 【1-3】カラーコードをr
続・思考するWEBディレクション 第1回「Webディレクターが意識すべき目線（1）」 - MdN Design Interactive
web creators／MdN Design Interactive共同企画 サイト制作のための実践マネジメント 続・思考するWebディレクション 第1回「Webディレクターが意識すべき目線（1）」 2011年4月19日 TEXT：文＝田口 真行（株式会社デスクトップワークス） Webサイトを制作するうえで欠かせないのが、Webディレクターの存在だ。クライアントへのヒアリングや提案、スケジュール設定、制作物のクオリティ管理など、業務領域は多岐にわたる。ここでは、すぐれたクオリティを発揮するWebディレクターとなるために必要な知識や考え方などを紹介していく。 今回はWebディレクターにおけるディレクションクオリティを左右する「目線」について取り上げる。クライアントの依頼に対して、Webサイト制作のプロとして接するWebディレクター。その立場において「目線」の持ち方ひとつで、進行上発生する問
WEBデザインスタイルアップTips 第7回 目次 - MdN Design Interactive
ナビゲーションのひとつとしてパンくずリストを取り入れたり、手順を踏んでユーザーに操作してもらう場合はステップ全体がわかるようにデザインすることは多いはずだ。「pixels and digital bits」の「Tutorial - CSS Overlapping Arrow Buttons」（www.firefly-multimedia.com/chatterbox/?p=26）で取り上げられている例を参考に考えてみよう【1】。 【1】パンくずナビゲーションやステップを示すデザイン 【2】アイコンの背景色をCSSで指定まずはHTML【2】とCSS【3】を用意しよう。参考サイトで取り上げてある方法では左右の画像との余白がとりにくいのでspan要素を追加する。見た目が調整しやすくなるはずだ。li要素の背景色にアイコンとしての色を指定しておき、そこにアイコンの形で透過している左右画像【4】を載せ
第1回 Webサイト構築・運用の流れ - MdN Design Interactive
WEBディレクションの極意 文＝島元大輔 大阪のWeb制作会社でWebディレクターとして活躍後、（株）キノトロープに入社。数多くの企業Webサイト構築プロジェクトにかかわる。その後、（株）ライブドアに入社、現在は（株）セシールに在籍。著書として「だから、Webディレクターはやめられない」（ソシム刊）。 url.blog-project.cecile.co.jp/ 第1回 Webサイト構築・運用の流れ 企業のWebサイトを構築するとき、最初から最後までひとりでつくり上げるということはまずない。制作も運用もさまざまな人物が登場することになる。そこで、その多くの登場人物をまとめ上げ、作業をスムーズに進行させるWebディレクターの存在が欠かせないものとなる。このページではWebディレクションに焦点を当てて、Webサイト構築・運用の進め方、コツ、心得などをそれぞれの場面ごとに解説していく。 Webサ
MdN Design｜総合情報サイト
スタイルの付与・常套テクニックを使う CSSを分けて記述する 次にスタイルを定義していく。このようにシンプルなデザインの場合は、常套（じょうとう）的に使われているテクニックで効率的に制作できる。 CSSを設定するには＜link＞要素を用いて、href属性にパスを指定する。ここではほかに、type属性とrel属性・media属性を指定している。これらの属性について説明すると、＜link＞のtype属性はhrefで指定されるコンテンツ（この場合はCSSファイル）のMIMEタイプに関する情報を与えることができる。rel属性は、そのコンテンツとの関係性を述べ、media属性は意図する出力メディアを指定できる。ここでは「all」と指定しているので、すべてのメディアに対してこのCSSが適用されることになる。 この＜link＞属性に割り当てられているのは、CSSをインポートするのみの役割を持ったCSSで
MdN Design｜総合情報サイト
WEBのネタに困らないクリエイターになろう！ デザインアイデアが続々わき出る3ステップ＆トレーニング クリエイティブなものをつくりたいけれど、新しいデザインや斬新なアイデアはそうそう生まれるものではない。本特集は、デザインの基となるネタを集め整理し、それを並び替えたりするなど、目に見えるカタチへアレンジすることで、新しいデザインを生む方法を3ステップ形式で紹介する。
MdN Design｜総合情報サイト
Web制作が楽しくなるCSS3/JavaScriptのテクニック50 - 海外デザイン事情第6回 新規会員登録 ログイン管理 Twitter facebook はてなブックマーク RSS 2024.6.23 SUN 第6回「Web制作が楽しくなるCSS3/JavaScriptのテクニック50」 2010年02月15日 ブラウザ対応が進み、本格普及が間近となったCSS3。海外ではすでに多くのCSS3を使ったデザインテクニックが公開されている。ここではSmashing Magazineに掲載された「50 Brilliant CSS3/JavaScript Coding Techniques」をもとに、CSS3に関する海外の最新テクニックを紹介しよう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Brillian
MdN Design｜総合情報サイト
第4回「CSS3を使ったより強く、より良い、より手軽なデザイン」 2010年01月05日 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：Stronger, Better, Faster Design with CSS3 http://www.smashingmagazine.com/2009/12/16/stronger-better-faster-design-with-css3/ 著者：ZURB 翻訳：中野恵美子 ※本記事は「Smashing Magazine」様より許可を得て翻訳、掲載しています CSS3に関する前回の記事「Pushing Your Buttons With Practical CSS3」で、私たちはCSS gradients、角丸の囲み罫、ドロップシャドウなど、CSS3の新しいテクニックを使
MdN Design｜総合情報サイト
第1回 人々の心をつかむWebデザインにまつわる数字 「WEB Design Explorer」では、Webデザイナーやディレクター、またそれを目指す人へ向けてWebデザインに関する身近な話題から、世界のWebの最新事情まで、毎回さまざまなテーマでお送りする。第1回目のテーマは、人々の心をつかむWebデザインについて述べることにする。 （文＝河内康和） ユーザーは待ってくれない! 4秒でユーザーは逃げる どれだけ美しいWebサイトをデザインしても、必ずしもユーザーの印象が良いというわけではない。繰り返し訪問してもらえるWebサイトは、瞬時にユーザーの心をつかみ、ユーザーを満足させる要素が含まれている。今回は、人々の心をつかむWebサイトを制作するためにぜひ頭に入れておきたい要素を具体的な数字を使っていくつか紹介しよう。 まず、ユーザーが最初にWebサイトに訪問する際、ローディングにあまりに
「CSS 3をクロスブラウザで実装するプログレッシブ・エンハンスメント」 by. 菊池 崇 - MdN Design Interactive
「CSS 3をクロスブラウザで実装するプログレッシブ・エンハンスメント」 2009年10月22日 TEXT：菊池 崇 Web制作時にはどのブラウザをターゲットにすべきか ブラウザの開発スピードは、3年前と比べて約3倍に向上している。おもな開発の焦点はレンダリングエンジンの高速化であったのだが、その脇で進められていたCSSの実装でも各ブラウザに違いがでてきた。特に、2008年よりCSS 3の実装に大きな差がでてきている。それもそのはず、1999年に開発されたInternet Explorer（IE）6と、2009年6月にリリースされた Firefox 3.5が同時に存在しているのだから、大きな差がうまれるのは当然だ。 しかし、このふたつのブラウザには似ている部分がある、シェアが20％前後（2009年9月時点）と非常に近いのだ。 ブラウザのシェア（Browser market shareより）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
