タグ

2016年4月2日のブックマーク (53件)

  • Adobe Experience Design(XD)を使ってアプリのプロトタイプを作ってみた

    2018年3月15日 XD, スマートフォン, 便利ツール 先日発表された、Adobeのプロトタイピングツール、Adobe Experience Design(Adobe XD)。Sketchライクなシンプルなグラフィックツールです。なにやら面白そうだったので、早速つついてみました。デモとして、簡単にチャットアプリのプロトタイプを作ってみたので、使用感とともに紹介します。 ↑私が10年以上利用している会計ソフト! Adobe Experience Design(Adobe XD)って何? Adobe XDはアプリやWebサイト等のデザインに使えるグラフィックツール。ただグラフィックが作成できるだけではなく、クリックやタップで次の画面に移動し、実際に動作しているようなプロトタイプも作成できます。それだけの機能がついて、なんと無料です! 残念ながら今のところMac専用ツールですが、今年中にWi

    Adobe Experience Design(XD)を使ってアプリのプロトタイプを作ってみた
  • 「Web制作会社では生き残れない」サンフランシスコに拠点を構えるbtraxが捨てたもの

    2015年10月4日、チームラボ、LIG、IMJの3社の共催による「CREATOR’S KITCHEN」の第4弾が行われました。イベントの前半パートには、日米市場向けのBranding/Marketing会社「btrax」のCEO・Brandon K. Hill氏が登壇。ブランドン氏は、同社が拠点を構えるサンフランシスコのビジネスの現状と、クラウドソーシングの発達を背景に、今後企業に求められるサービスの付加価値について語りました。 Webデザイン仕事がない! 選択肢は「無職」か「起業」 ブランドン K. ヒル氏(以下、ヒル):こんにちは。猪子(寿之)さんと誕生日が一緒のブランドン・ヒルです。昨日、イベントやってたんですよ。 DC(David Collier氏)が予選1位(笑)。Japan Nightという、スタートアップのピッチコンテストで、12社プレゼンしました。全部英語なんですけど。

    「Web制作会社では生き残れない」サンフランシスコに拠点を構えるbtraxが捨てたもの
  • グループチャットに振り回されている君へ:グループチャット「Basecamp」創業者が語る「リアルタイム/非同時」を使い分けるコツ - BRIDGE(ブリッジ)テクノロジー&スタートアップ情報

    Jason Friedさんは、BasecampのファウンダーでCEOです。「Getting Real」「Remote」、そしてニューヨーク・タイムズのベストセラーで日でも話題になった「REWORK」(邦題:「小さなチーム、大きな仕事」)の著者でもあります。稿は、もともとIncに投稿され、Mediumにも再掲された記事をご人から許可を得て翻訳したものです。Twitterは、@jasonfriedでフォローできます。 君はこんなことになっていない?または、他者をこんな気持ちにさせていないだろうか? グループチャットは、アジェンダのない、行き当たりばったりの参加者と共に参加する1日中続く会議のようなものだ。 2006年、僕たちは「Campfire」をリリースした。それは、SAASの現代風ビジネス向けグループチャットとメッセージツールの先駆けだった。 それ以来、Hipchat、Flowdoc

    グループチャットに振り回されている君へ:グループチャット「Basecamp」創業者が語る「リアルタイム/非同時」を使い分けるコツ - BRIDGE(ブリッジ)テクノロジー&スタートアップ情報
  • Slack、君と別れようと思う。 | POSTD

    “改革が暴政の負担を軽くしてくれることは決してない。その負担を、単に別の誰かに負わせるだけだ。” George Bernard Shaw こんにちは、Slack。 これは簡単ではないでしょうが、最良の方法です。 君も僕も分かっているように、始まりは とてもすばらしかった のです。僕は爆発しそうなメールの受信箱と共に、君はEメールを過去のものにするという(とてもセクシーな)野望と共に。 ただ、結局のところ、僕らはお互いにとって良かったのかどうか、分からないのです。あるいは、もっと重要なことを言えば、そもそも君と関係を築いたことで、僕と他のものとの間でうまくいかなかったことが解決できたのかどうか、分かりません。 Eメールと僕は問題を抱えていたのを、誰もが知っています。Eメールは、全く新しい世界の活発な探求として始まり、あっという間に世間の期待を超えるレベルにまで拡大しました。僕が気づいた頃には

    Slack、君と別れようと思う。 | POSTD
  • 中国を「見下す」日本人が失ったかつての自信 | 幻冬舎plus | 東洋経済オンライン | 経済ニュースの新基準

    東大大学院で修士号を取得し、現在テレビ朝日に務める中国人女性・張予思さんが上梓した『革命とパンダ:日人はなぜ中国のステレオタイプをつくりだすのか』(イースト・プレス刊)をめぐり、著者と社会学者・開沼博さんが語り合った[前編]は、予想以上に大きな反響を呼ぶものとなった。 日の農協も欧州で「爆買い」していた時代があった 張 予思(以下、張):『革命とパンダ』は、書店だと嫌中と並んで置いてありますが、もちろんそういった中国人として嫌です。何がいちばん嫌かというと、中国人が書いているもあることですね。むしろ中国人が書いているから説得力があるというふうに認識されているんでしょうけれども、そういう中国人はたぶん長く中国に帰っていない人たちだと思いますし、日の空気を読んで、「こういうが売れるんだろう」と書いているものがほとんどだと思います。 正直、私もパラパラ目次くらい読んで、もう腹が立

    中国を「見下す」日本人が失ったかつての自信 | 幻冬舎plus | 東洋経済オンライン | 経済ニュースの新基準
  • 中国を「虚像」でしか見ていない日本人の盲点 | 幻冬舎plus | 東洋経済オンライン | 経済ニュースの新基準

    日中関係が戦後最悪と言われる中、日人のステレオタイプな中国観の変遷を分析した新刊『革命とパンダ:日人はなぜ中国のステレオタイプをつくりだすのか』(イースト・プレス刊)が、いま話題になっている。 著者の張予思さんは南京出身、中国からの留学生として東京大学大学院に入学し、こののベースとなる修論を書き上げた。現在はテレビ朝日に務め、日々情報番組の取材に明け暮れている。 自分のが「嫌中」に囲まれ、四面楚歌状態だった 開沼 博(以下、開沼):張さんと僕は、もともと東京大学の学際情報学府の吉見俊哉ゼミでご一緒していました。先輩だと北田暁大さんなどがいるゼミです。ところで張さんの副指導の先生は誰だったんですか? 張 予思(以下、張):林香里先生ですね。 開沼:メディア論の林香里先生。そこで、いつからいつまで勉強してたんでしたっけ? 張:私が吉見ゼミに入ったのは、2009年の10月です。外国人研究

    中国を「虚像」でしか見ていない日本人の盲点 | 幻冬舎plus | 東洋経済オンライン | 経済ニュースの新基準
  • インターネットの自由と世間様 - シロクマの屑籠

    これに類することは沢山の人が書いているし、私だって書いていそうだけれども、反復的になったって構わないから書いておく。 たぶん、昔インターネットをはじめた人が考えていた自由とは、「自分の表現したい事を、誰にも文句を言われることなく表現できる」自由だったのだと思う。少なくとも私がネットサーフィンしていて感じたのは、それだった。あとは「表現されているものを誰にも文句を言われることなく閲覧する自由」。世間に対する呪詛も、いかがわしいエロも、書いたって構わないし眺めたって構わない――「インターネットは自由だ」と言った時に多くのユーザーが無意識のうちに含意していたのは、表現するにせよ、閲覧するにせよ、そういった「誰にも文句を言われることがない」という修飾語のついた自由だった。イコールではないけれども「無責任」というレトリックにも近かったかもしれない。 現在もインターネットには表現の自由がある、と思う。

    インターネットの自由と世間様 - シロクマの屑籠
    popup-desktop
    popup-desktop 2016/04/02
    「現在のインターネットの自由とは、「自分の表現したい事を、あらゆる人に検閲される前提で行使する自由」であり、「あらゆる価値観の見ず知らずの人間から批評されることを前提とした自由」」
  • Web・アプリデザイナー必見! Adobe Photoshop CCの「デザインスペース」を使った新しいワークフロー - ICS MEDIA

    ▲ 設定できる項目数の比較 「設定できる項目が少なくてデザインができないのではないか」と思われるかもしれませんが、その点は心配ありません。デザインスペースから標準のワークスペースへは、[ウィンドウ]→[標準のPhotoshopに戻る]により切り替えることができます。Web・アプリケーションのデザインはデザインスペースを使って素早くデザインし、どうしても標準のデザイン機能でないと実現できないデザインがあれば標準版へ切り替えながらデザインする、というワークフローとなります。 デザインスペースは未来のワークフロー 筆者は何度かこのデザインスペースを使用してデザイン作業をしていますが、標準版より目的の機能に素早くアクセスできるようになって非常に便利です。また、Adobeのグラフィック作成ソフト「Adobe Fireworks CS6」に近いようにも見えますが、必要な場合はすぐにPhotoshopの

    Web・アプリデザイナー必見! Adobe Photoshop CCの「デザインスペース」を使った新しいワークフロー - ICS MEDIA
    popup-desktop
    popup-desktop 2016/04/02
    [design space
  • なぜ iPhone の画像は Android の画像よりもずっと高品質なのか - Qiita

    AndroidiPhone との比較は多くの点で議論されており、どちらがより良いかは、Android の画像の質は iPhone とくらべてずっと劣るという点を除けば、未だ結論が出ていません。Facebook、Twitter、Instagram 等どれを使っていても、写真をとって、フィルタをかけて、ソーシャルネットワーク上に公開すると、いつも Android から投稿される写真は画質が劣化しています。しかし何故でしょう? 私達は昨年の間調査をし、そしてついに、Google が犯したほんのちょっとしたミスが原因であることを突き止めました。それは当にちょっとしたミスでしたが、その影響はすべての画像を扱うアプリケーションに波及するほど大きく、現在に亘っても影響が続いています。 問題は、libjpegです。 libjpegといえば、数多くのオープンソースプロダクトでも使用されており、And

    なぜ iPhone の画像は Android の画像よりもずっと高品質なのか - Qiita
  • CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック

    文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit(ビューポートの単位)で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit(ビューポートの単位)とは? フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精

    CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
  • [CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法

    先日の記事「フォントサイズの指定方法(翻訳版)」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (

    [CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
  • 「売国奴」「この国から去れ!」外国人記者に罵声を浴びせる彼らは何者か(山田 敏弘) @gendai_biz

    「反日のクズ記者は出ていけ!」 東京の有楽町にある日外国特派員協会(FCCJ)は「Number 1 Shimbun(ナンバーワン・シンブン)」という英字誌を発行している。 この英字誌は、FCCJの会員である在日外国人記者などによって執筆・編集されている月刊誌だ。日絡みの話題を、日人とは違う視点で取り上げているため、著者もチェックしている雑誌の1つである。 その2016年1月号に、非常に興味深い記事が掲載された。英エコノミスト紙のデイビッド・マクニール記者によるその記事は、「In the valley of the trolls(トロールという敵だらけの世界で)」というタイトルで、日の「Troll(トロール)」について触れたもの。トロールとは、インターネットなどで”荒らし”をしたり、個人攻撃をする行為を指すスラングだ。 この記事によると、日政治や経済、社会問題などを世界に向けて発

    「売国奴」「この国から去れ!」外国人記者に罵声を浴びせる彼らは何者か(山田 敏弘) @gendai_biz
  • 「テキストのサイズ変更」の達成基準について考える | Accessible & Usable

    公開日 : 2013年12月12日 (2014年12月7日 更新) カテゴリー : アクセシビリティ この記事は、「Web Accessibility Advent Calendar 2013」の12日目のエントリーです。Web アクセシビリティのトピックとしては些細な話かもしれませんが、「神は細部に宿る」という言葉もあることですし、アクセシビリティという大きなテーマを考えるひとつの要素として、触れたいと思います。 さて、JIS X8341-3:2010 には、下記の規定があります。 コンテンツ又は機能を損なうことなく、テキストを支援技術なしで200%までサイズ変更できなければならない。ただし、キャプション及び画像化された文字は除く。 注記1 サイズ変更は、ユーザーエージェントの初期設定を基準とする。200%は、幅及び高さを2倍にすることである。 出典 : JIS-X8341-3:2010

    「テキストのサイズ変更」の達成基準について考える | Accessible & Usable
  • The Blog | Welcome to Adobe Blog

    The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

    The Blog | Welcome to Adobe Blog
  • 日本語Webフォントの流行の最適化「NotoSans」「サブセット化」 - Qiita

    語Webフォントを最適化 そもそもなぜ フォントはそもそも機種依存 欧米フォントは、字数が限られている為ファイルサイズがそもそも小さい約250KB。しかし、日語は16MBとか。(orz)なので、欧米フォントのようにheadにリンクをはって、アクセスごとにまるごとダウンロードすると重すぎる んじゃどうするの GoogleとAdobeが無料フォント「Noto Sans」作ってくれました。(これで無料でできます) 何が良くて、何が悪い メリット 全ての環境で統一したフォントで表示ができる デメリット ページ表示時の自前のフォントファイルダウンロード分の通信コストがかかる 導入手順 まず「Noto Sans」をダウンロード サブセット化(普段使う文字だけ抜き出す) 各環境への対応のためにファイル形式を変える フォントをディレクトリーに設置し、CSSに@font-face記述をする *****

    日本語Webフォントの流行の最適化「NotoSans」「サブセット化」 - Qiita
  • AMP(Accelerated Mobile Pages)の基礎知識から対応・導入方法まで!まとめ | 株式会社ウェブ企画パートナーズ

    「Accelerated Mobile Pages」と呼ばれるGoogle推し進めてきたプロジェクトですが、とうとう正式導入されることになりました。「Accelerated」は「加速される」という意味で、つまりモバイルページ高速化プロジェクト、といったところでしょうか。 まずは導入後のイメージを御覧ください。(英語ですが公式サイトのイメージよりもわかりやすいです) このように、検索結果にカルーセル形式で表示され、リンクをタップすると物凄いスピードでページが表示されます。 自分の携帯で試してみたい方は、下記URLのGoogle検索画面から「ニュース」というキーワードなどで検索してみてください。 http://g.co/ampdemo(※スマホからアクセスしてください) 既にTwitterやアメブロなど、様々なメディアがAMP対応を導入しています。 Googleが過去に発表してきた、モバイル

    AMP(Accelerated Mobile Pages)の基礎知識から対応・導入方法まで!まとめ | 株式会社ウェブ企画パートナーズ
  • レスポンシブWebデザインでうまくやるための考え方

    Select your reason for reporting this presentation as inappropriate.**Required

    レスポンシブWebデザインでうまくやるための考え方
  • BLOGOS サービス終了のお知らせ

    平素は株式会社ライブドアのサービスを ご利用いただきありがとうございます。 提言型ニュースサイト「BLOGOS」は、 2022年5月31日をもちまして、 サービスの提供を終了いたしました。 一部のオリジナル記事につきましては、 livedoorニュース内の 「BLOGOSの記事一覧」からご覧いただけます。 長らくご利用いただき、ありがとうございました。 サービス終了に関するお問い合わせは、 下記までお願いいたします。 お問い合わせ ※カテゴリは、「その他のお問い合わせ」を選択して下さい。

    BLOGOS サービス終了のお知らせ
  • テレビ視聴とメディア利用の現在|NHK放送文化研究所

    2015年2~3月に実施した「日人とテレビ・2015」調査の結果を報告する。この調査は,テレビに関する人々の行動や意識について定期的に測定し,その変化を探ることを目的として,1985年から5年ごとに行っている全国世論調査である。これまで,テレビ視聴の行動面だけでなく,意識の面からも長期的な変化をとらえてきたが,前回2010年調査では,質問項目を全体的に見直し,調査方法も個人面接法から配付回収法に変更した。報告では2010年からの5年間に起きた変化を中心に報告する。 テレビは,調査を開始した1985年から30年の歳月を経ても,その高い満足度を維持するなど,人々の生活において親しいメディアであることに変わりはない。しかし,テレビに「毎日」接触する人の割合が8割を下回り,リアルタイムの視聴時間は全体でも短時間化に転じる一方で,録画したテレビ番組やインターネット動画を視聴する人は中高年層にも広

  • 2015年11月17日 誰が何を誤解しているのか? ~放送と公権力の関係についての私見②~

    倫理規範なのか 法規範なのか? BPOの意見書発表から10日ほど時間が過ぎ、不当な「介入」「圧力」を指摘された公権力からの反論も一義的にはおおよそ出そろった感があります。 代表的なものをいくつか拾ってみましょう。 BPOが放送法の4条を「倫理規範」としたことに対して異論が目立ちます。 「放送法には規範性があり、違反があれば3ヶ月以内の業務停止命令ができる」(高市総務相) 「単なる倫理規定ではなく法規であり、これに違反しているのだから、担当官庁が法に則って対応するのは当然」「予算を国会で承認する責任がある国会議員が果たして事実を曲げているかどうかについて議論するというのは当然のこと」(10日の予算委員会での安倍首相発言) 「BPOは放送法を誤解している。NHKの調査報告書に放送法に抵触する点があったので必要な対応を行った」(菅官房長官) お互いの主張は一件平行線をたどっているように見え、日頃

    2015年11月17日 誰が何を誤解しているのか? ~放送と公権力の関係についての私見②~
  • 朝の活動が不便-米国人WSJ記者の東京生活記

    This copy is for your personal, non-commercial use only. Distribution and use of this material are governed by our Subscriber Agreement and by copyright law. For non-personal use or to order multiple copies, please contact Dow Jones Reprints at 1-800-843-0008 or visit www.djreprints.com. http://jp.wsj.com/article/SB12090554170328684804804581079532601891172.html

    朝の活動が不便-米国人WSJ記者の東京生活記
  • SINAP | レスポンシブの基本をおさらい:画像の見せ方とレイアウトのパターンを把握しよう

    シナップの小茅です。今回はRWDならではのデザイン表現として「よく見かける画像の見せ方」と、簡単にレイアウトパターンについてまとめました。 RWDではマルチデバイス対応を標準としており、ワンソース・マルチデバイスといった運用の効率化など良いメリットもある反面、複数デバイスを考えた設計や実装など、複雑な面も持ち合わせているため、制作前の綿密な計画は非常に重要です。それらを踏まえたまとめをご紹介します。 【 1 】 よく見かける画像の見せ方「RWDならではのデザイン表現とは?」 【 2 】レイアウトパターンのおさらい「デザイン・実装するのは、どのパターン?」 【 1 】 よく見かける画像の見せ方:RWDならではのデザイン表現とは? 最近は技術面においても開発が進み、RWDならではのデザイン表現が増えてきました。 そこで画像の表示方法をどのように考えたら良いか、4点ほど例をあげてご紹介します。

  • 【SNS運用担当必見!】SNSで視聴率アップに成功したテレビドラマの“ココ”がすごい! « 株式会社ガイアックス|SNSマーケティング支援サービス

    a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:

    【SNS運用担当必見!】SNSで視聴率アップに成功したテレビドラマの“ココ”がすごい! « 株式会社ガイアックス|SNSマーケティング支援サービス
  • 第39回 うつ病の足を引っ張る睡眠問題

    うつ病は心の風邪」という比喩を耳にしたことがある人も多いだろう。その出自は私も知らないが、1990年代の後半には雑誌やメディアでもしばしば取り上げられていたと記憶している。もともとは「うつ病は(風邪のように)誰でもかかる可能性のある病気、苦しかったら躊躇せずに受診して欲しい」くらいの意味合いだったはずだ。 ところがその主旨が誤解され、「風邪のような軽い病気ではない」「患者の苦痛を軽視している」などの非難を浴びるようになった。実際、うつ病は治りにくい病気だ。一般的に治療期間も長いため社会生活上の支障も大きく、回復した後も再発防止のための治療や心配りが必要になる。風邪と同列に扱われたのでは患者も家族もたまったものではない。うつ病に苦しむ人に心ない発言をしたりネット上にカキコミをする者も出るに至ってはこのような比喩は一切やめてしまった方が良いと思う。 うつ病が「誰でもかかる可能性のある病気」で

    第39回 うつ病の足を引っ張る睡眠問題
  • フロントエンドのテクニカルディレクションに求められるスキル

    フロントエンドのテクニカルディレクションに求められるスキル フロントエンドの多様化が進む中で昨今重要視されているのが「テクニカルディレクション」のスキルセットです。 会社の規模や職域、ビジネスモデルにより求められるスキルセットは異なりますが、中小のWeb制作会社を前提に話をいたします。 ディレクター/フロントエンドエンジニアの作業分担 ケースとしては以下のようなパターンが考えられます。 アサインされたディレクターがテクニカルディレクションを行い、フロントエンドエンジニアが実装を行う アサインされたフロントエンドエンジニアがテクニカルディレクションとフロントエンド実装を行う アサインされたSE/テクニカルディレクターがテクニカルディレクションを行い、フロントエンドエンジニアが実装を行う。 個人的には2のケースでアサインされることが一番多いですが、最近の案件では3のケースで1年ほどテクニカルデ

    フロントエンドのテクニカルディレクションに求められるスキル
  • Backlogで行う課題管理の10のコツと、クライアントに伝えるべきこと

    Backlogで行う課題管理の10のコツと、クライアントに伝えるべきこと 2012.11.28 | この方法お勧めです! Backlog | プロジェクト管理 Qを観る前にネタバレ見てしまったYO(挨拶)! どもども、ブルーです。 Web制作を生業にしていると、当然チームを組んで受託案件をこなすことがあるかと思います。会社員でもフリーランスでも同じでしょう。その様なとき、案件でこなすべきタスクの可視化や進捗管理にプロジェクト管理ツールを導入することも多いかと思います。今回は、その様なプロジェクト管理ツールのなかでも、WordPressコミュニティではWordCamp Osaka 2012やWordCamp KOBE 2011でもスポンサーとしてお馴染みのnulabさんのBacklogを題材に、Web制作の現場に即したタスク登録のコツについてご紹介したいと思います。 ちなみに、この記事はディ

    Backlogで行う課題管理の10のコツと、クライアントに伝えるべきこと
  • Bootstrap4の主な更新点 - Qiita

    こうして見てみると、一段階上のサイズが追加されたというよりも、xs と sm の間が細かくなったという感じですね。 flexboxのサポート $enable-flex: true;を設定することでflexbox Layoutが使用されるようになります。これにより、tableやfloatを使っていた様々なハックが改善されるとのこと。ただし、IE9はflexbox Layoutをサポートしておらず、IE10でも古い仕様にしか対応していないため、デフォルトではこのオプションはfalseになっています。 well, thumbnail, panel を廃止、card に統一 コンポーネントの well, thumbnail, panelがなくなり、cardに統一されました。 CSSリセットを Reboot というモジュールに統一 CSSリセットには、Bootstrap3ではNormalize.cs

    Bootstrap4の主な更新点 - Qiita
  • 【Photoshop入門】Webデザインをはじめよう!第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog

    The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

    【Photoshop入門】Webデザインをはじめよう!第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
  • Mac OS X El Capitanのヒラギノ角ゴシック

    MarvericksからやっとこさEl Capitanにしました。 フォントのレンダリングがシュッとしたりUIがカリッとしたり、色々と見た目がわかりやすくなっていて好印象です。 とそんななかOSをアップデートしてから表示が変になったとの報告があり、自分でも確認しました。 弊社のSlack太字の部分が明らかにデブっとしています。これがなんだか分からなく困っていた様子でした。 ということでCodepenにてヒラギノをフォント指定してリストを作りました。 Codepenのスクリーンショットいい感じですね。ただCSSではfont-weight: 0;が指定できないので表現出来なさそうです。 Slackで何故文字が太くなったかというと、Slack側のCSSで font-weight: 900; と指定されていることが原因でした。 日語のウェイトが大体二つだったことにより発生していなかっただけで、実

    Mac OS X El Capitanのヒラギノ角ゴシック
  • レスポンシブWebデザイン(RWD)とユーザーエクスペリエンス

    多数のデバイスをサポートするためにレスポンシブデザインのチームが作成するサイトは1つだが、ユーザビリティを確実なものにするには、全デバイスでのコンテンツやデザイン、パフォーマンスを考慮する必要がある。 Responsive Web Design (RWD) and User Experience by Amy Schade on May 4, 2014 日語版2014年6月4日公開 レスポンシブデザインの定義 レスポンシブWebデザイン(RWD)とは、Webサイトの外観を、それを見るために利用しているデバイスの画面サイズや向きに合わせて動的に変化させるWeb開発アプローチである。RWDは、ごく小さなスマホから巨大なデスクトップモニターまで、顧客が利用する多数のデバイス向けにデザインする、という課題に対する方策の1つといえる。 RWDはいわゆるブレイクポイントを利用して、サイトのレイアウト

    レスポンシブWebデザイン(RWD)とユーザーエクスペリエンス
  • 3つだけ覚える「flexbox」の使い方 - Qiita

    3行で説明、flexboxとは CSS3から導入されたfloatに変わる新しいレイアウト方法です。 伸びたり並んだりします。 俺、flexboxのプロパティ何回ググるんだろう問題 flexboxのプロパティめっちゃ多いですね。正直覚えきれませんし、覚えるつもりもなくなってきます。それに、別に複雑なことをやりたいわけではないですね。 具体的には、下記のようなことができれば十分なんです。 リキッド2カラムレイアウト スティッキーフッタ(最下部に吸い付くフッタ) この程度のものであれば、覚えるべきflexbox関連のCSSプロパティの数も絞れそうです。 覚えておくべき3つのプロパティ display: flex flex: 1 flex-direction: column これだけでわりとこなせます。以下で、実例をもとに説明します。 2カラムレイアウト さて、よくある2カラムレイアウトです。 で

    3つだけ覚える「flexbox」の使い方 - Qiita
  • JavaScript書けない人間が1年間でフロントエンドエンジニアになった話 - DMM.comラボ デザイナーズブログ

    こんにちは、デザイン部所属の石橋です。 今はデザイナーをやりつつフロントエンドエンジニアをさせてもらってます。 そんな自分は2014年の5月にDMM.comラボへ来たんですが、入社時のスペックを以下に記します。 入社時のぼく HTML出来ます!(ただし<section>の使い方はぼんやり) CSS出来ます!(ただしスタイリングだけで設計は出来ない) jQuery出来ます!(ただし既存プラグイン実装に限る) おや…? 「(フロントエンドってなんだろう…)」 「(JavaScriptとjQueryって何が違うんだろう…)」 やばい。 当時はいわゆる「コーディングがちょっとだけ得意なWebデザイナー」でした。 シンデレラストーリー プロローグ 弊社では一部のデザイナーも結構ガリガリとコーディングをするのですが、 入社時にまわりの能力の高さにちょっと気で「ヤベェ所に来てしまった…」感がありました

    JavaScript書けない人間が1年間でフロントエンドエンジニアになった話 - DMM.comラボ デザイナーズブログ
  • Gitコミットメッセージの7大原則 - rochefort's blog

    タイトルは大げさです。割と当たり前の話です。 ハードディスクの整理中にRailscastsのメモが出てきまして 懐かしいなぁ、 Ryan Bates(@rbates)さん 元気かなぁと Twitterを覗いてみたところ How to write a Git commit message: http://t.co/D31dVh1lks— Ryan Bates (@rbates) 2015, 7月 28 なかなか興味深い記事をtweetされていました。 Git の commit messageに 規律をもたらそうぜ、ってのは どうやら日人だけじゃないようです。 元記事( How to Write a Git Commit Message ) Introduction 著者の過去と現在のcommit logを対比しています。 一貫して、この緑と赤の対比が見やすいので、記事も読みやすいです。 ま

    Gitコミットメッセージの7大原則 - rochefort's blog
  • SINAP | スマホサイトのメニューボタン、優良企業195社を検証!

    みなさんこんにちは、連載「スマホサイトのメニュー表現」2日目では、実際に企業195社のメニュー表現の調査結果をお伝えしていきます。 それではさっそく見ていきましょう! <スマホサイトのメニュー表現:連載> 1日目:「スマホサイトのメニュー、ハンバーガーボタンで大丈夫?」 2日目:「スマホサイトのメニューボタン、優良企業195社を検証!」 3日目:「参考にしたい!業態別に見る各社のヘッダー周りの表現方法」 調査結果 今回の調査では、幅広い世代にとって知名度の高い全業種の優良企業をできるだけ公平にピックアップしたかったので、Gomezが2015年4月に発表したIRサイトランキングを利用し、上位195社をまず一覧にまとめ、まずはスマホ対応している企業117社に絞りました。 調査票:スマホサイトのメニューボタン 次に、以下の内容で分類を行いました。 1. アイコンの種類 2. メニューボタンの表現

  • 日本人がRとLを区別できないのはローマ字のせい - 生の食パン

    2015-07-07 日人がRとLを区別できないのはローマ字のせい 英語 RとLの区別は英語学習において、多くの日人がぶち当たる壁です。例えば、Right(右)とLight(軽い)はカタカナにすると同じ「ライト」になってしまいます。ややこしいですよね。リスニングでもRとLの区別は難しいと思います。 しかし、英語のネイティブスピーカーに聞いてみると、RとLは全く別の音で、間違えようがないといいます。これは舌や耳の構造が違うからではありません。 これには、日人の頭の中にある思い込みが関係しています。その原因は、私たちが英語を習う前に習う、「ローマ字」にあります。 「らりるれろ」はRではない ローマ字では、「らりるれろ」はRa Ri Ru Re Ro と表記されます。 「ら行」の付く名前、例えば「りさ」とか「かおる」といった名前もRisa, Kaoruなど通常はRを使って表記されま

    日本人がRとLを区別できないのはローマ字のせい - 生の食パン
  • 子どもたちのユーザーテストでおさえておきたい6つのコツ

    スマホやタブレット、その他の携帯型ゲームデバイスの出現により、子どもたちはこれまで以上に幼いときから、最新の技術に触れるようになりました。最早、赤ん坊の時からそうした技術に巻き込まれているといっても良いほどで、こうした状況は世界中で彼らの両親、開発者の双方にとって直面する大きな問題となりつつあります。 幼い子どもたちの関心はその両親にも強い影響力を及ぼしますし、子どもたちは今では早い時期から自分たちが消費者であるということ自覚し始めていると言われています。 このことは私たちにとって何を意味するのでしょう? それは極めて簡単なことで、アプリやWebサイト、またはゲームにおけるユーザーテストというのが今まで以上に重要になったということです。 ですがここで一つ問題があります。UXデザイナーとして、私たちは多くの十代の若者や大人たちに対してユーザビリティテストを行うことが多く、そうした意味では非常

    子どもたちのユーザーテストでおさえておきたい6つのコツ
  • テリー伊藤が看破した恋愛バラエティの弱点 - てれびのスキマ

    8月2日の早朝に放送された『はい!テレビ朝日です!』はテリー伊藤をゲストに迎え、「これからのバラエティ番組」をテーマにしながらも、テリー伊藤がテレビの世界に入ったきっかけや『天才・たけしの元気が出るテレビ!!』や『ねるとん紅鯨団』などの制作秘話を語っていた。 テリー伊藤は1968年に日大学・経済学部に入学。折しも学生運動が盛んだった頃。テリーもそこに身を投じた。 しかし、投石が左目を直撃し大怪我を負ったことがきっかけで、学生運動から遠ざかり、遊びまくっていたという。周囲が就職活動を始めても、遊んでいたテリーは、当然のように就職に失敗し、バイト生活を余儀なくされた。 目標が見つからず、自分の進路に迷っていたテリーは、これまでの人生を振り返る。 大学時代にコンサートを自分で開いたんです。色んな大学の連中に出てもらって自分が司会やって、演出もやったんです。『そうだ、あの時、幕が閉まる時泣いたよ

    テリー伊藤が看破した恋愛バラエティの弱点 - てれびのスキマ
  • 【JK語】2020年版!SNSでよく使う流行りの若者言葉ランキング全130選【ギャル語】

    新しい若者言葉(7語)まず最初に、皆さんに知ってもらいたいここ最近ホットになって来ている若者言葉を取り上げたいと思います。 既にかなりの頻度使われているものもあれば、これから流行るか流行らないか行く末を見守りたい若者言葉などそれぞれ含めてご紹介していきます! ぴえんぽしゃけ弱いのぴえん pic.twitter.com/1SPbfLpDo9 — のぴ【おこさまぷれ〜と。】 (@nopiokopure) January 21, 2020 悲しいことがあったときに「(泣)」の意味で使われている言葉。2019年に一気に広まりSNSで定着している若者言葉ですね。 泣き声の「ぴえーん」が語源と言われています。響きが可愛く、使いやすい言葉なので普及率も高めです。 目をうるうるさせた顔の絵文字と一緒に使う人も多いです。「ぴえん」のイメージがその表情なのかなと思います(笑) 最高つぶやき回数:30,962回

    【JK語】2020年版!SNSでよく使う流行りの若者言葉ランキング全130選【ギャル語】
  • Sketch 3を使う3つの理由と10の魅力

    海外UIデザイナーの間で爆発的に広まっているデザインツール「Sketch 3」。連載では、国内きってのUIデザイン集団であるグッドパッチのデザイナー陣が、Sketch 3によるUIデザインの方法を解説します。(編集部) Sketch 3は、オランダのボヘミアンコーディングが開発・販売しているMac OS専用のベクタードローイングツールです。日ではIllustratorやPhotoshopに押されてまだマイナーな存在ですが、海外ではすでに多くのUIデザイナーが使用しています。グッドパッチでもほとんどのUIデザインはSketch 3を使用しています。 今回は、Sketch 3はどんなツールなのか、使う3つの理由と10の魅力をご紹介します。 1.安い Sketch 3は99ドル(1ドル120円とすると1万1800円)の買い切りソフトです。しかも1カ月間のフリートライアルがあるので、使い勝手

    Sketch 3を使う3つの理由と10の魅力
  • The Blog | Welcome to Adobe Blog

    The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

    The Blog | Welcome to Adobe Blog
  • 誰のためのデザイン?増補・改訂版を読んだ - ninjinkun's diary

    自分が最初に元の誰のためのデザイン?―認知科学者のデザイン原論 (新曜社認知科学選書)(初版はPOETと呼ばれている*1 )を読んだのは十数年前でした。4月に出たこの改訂版を読み返してみて、改めて感銘を受けました(そして内容をほとんど忘れていたのに気づきました)。 内容としては、エモーショナル・デザイン―微笑を誘うモノたちのために 、複雑さと共に暮らす―デザインの挑戦など後の書籍で検討された内容が盛り込まれて、ノーマン著作の集大成になっています。 自分がこの改訂版で注目しているのは、「6章デザイン思考」の追加です。 6章デザイン思考 正しい問題を発見するのがデザインである として、そのための手段としてデザイン思考が解説されます。 具体的にフレームワークとして取り上げられている人間中心デザインプロセスを見てみると、 観察→アイデア創出→プロトタイピング→テスト→観察… というサイクルになって

    誰のためのデザイン?増補・改訂版を読んだ - ninjinkun's diary
  • UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    初めまして。アメリカからやってきたUIデザイナーのCorey(コーリー)です。 LIGの転職サービス「Poole」でUIデザインをしています。 PhotoshopやIllustratorをメインとして使うデザイナーは多くいると思いますが、私はPhotoshopをほとんど使いません。1年前にSketchへ乗り換えたからです。 現在、日のデザイン界ではSketchはそれほど使われてないかもしれませんが、海外ではSketchが大ブームになっています。 今回は私が最強なPhotoshopからSketchへ乗り換えた理由をお伝えします。 Sketchへ乗り換えた理由(Why I Use Sketch) http://bohemiancoding.com/sketch/ 1. UI Design中心 Sketchは完全にWebとモバイルUIデザインの専用ツールなので、それ以外の余計な機能が入っていま

    UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • よくわかるマテリアルデザインの設計コンセプト | fladdict

    iPhoneAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた

    よくわかるマテリアルデザインの設計コンセプト | fladdict
  • SDS-MVS and KA Method | blog / bookslope

    Service Design Sprints で MVS ジャーニーのワークがありますが、その作成過程がインタビューや観察から定性的分析を行う「KA 法」と共通する部分があると感じたので、そのあたりを整理してみようと思います。 MVS (Intention + Avatar) Service Design Sprints の詳細は、書籍『サービス・スタートアップ』を見ていただくとして、その中に「MVS ジャーニー」というワークがあります(ワークブックのダウンロード)。MVS ジャーニーとは、サービスとユーザーの流れを示したもので、いわゆる To Be の CJM と言うこともできます。この MVS を作成する過程で、書き出す内容に「Intention」と「Avatar」があります。 この場合、インテンションとは「意図」ですが、ユーザーが達成したい「What(何)」を指します。アバターとは、

    SDS-MVS and KA Method | blog / bookslope
  • 極論、人は働かなくても生きていける──小野美由紀さんの「自分らしい働き方」とは | サイボウズ式

    作家・ライターとして活躍する小野美由紀さん。自身の半生を愚直に描き、話題を集めた著書『傷口から人生。 メンヘラが就活して失敗したら生きるのがおもしろくなった』には、身体をえぐるように鋭利で、ときに痛みをも感じさせる文章が綴られています。 多く寄せられている絶賛の声は、自分のカッコ悪さや恥部を堂々とさらけ出す小野さんの勇気や真の強さを讃えたものでしょう。行き過ぎた“教育ママ”から抑圧され、中3で自傷行為を始め、不登校になった小野さんは、きらびやかな大学生活になじめず、仮面浪人を経験。 その後、他人からよく見られたいあまりに、交換留学や世界一周1人旅、NPOでのボランティア、有名企業でのインターン、TOEIC950点など、いわゆる「ハイスペックな学生」として勝負できる武器を多く持ち、自信をつけたものの、わけあって「就活をやめる」選択をします。 そんな小野さんには「無職」だった時期もありました。

    極論、人は働かなくても生きていける──小野美由紀さんの「自分らしい働き方」とは | サイボウズ式
  • ボビー・オロゴンは5つの会社のオーナーだった! ボビー流情報の取り方って?

    「もす!」という掛け声でお馴染みのタレント、ボビー・オロゴンさん。ナイジェリア出身で、『さんまのSUPERからくりTV』の街頭インタビューに出演後、そのキャラクターが買われて一躍スターの道へ。格闘家への挑戦や『Youは何しに日へ?』でのナレーターとしての活躍などは有名ですが、なんと、そ...

    ボビー・オロゴンは5つの会社のオーナーだった! ボビー流情報の取り方って?
  • 荻窪のイタリアンレストラン「ドラマティコ」、移転から4カ月 カウンター席も新設

  • 「ほぼ日」のフロントエンドエンジニア募集。

    小山 健(こやま けん) 会社員時代に描いていたブログまんが 「手足をのばしてパタパタする」が出版され、 その後、「死ぬ前に1回やっとこう」を たてつづけに出す。 「ほんとうのことを ほんとうのこととして描くまんが」と、 糸井重里もファンのひとり。 まんがに登場する「人」は金髪だが、 実際のご人は金髪ではない。 KOYAMA KEN Illustration web site ほぼ日刊イトイ新聞のウェブサイトを 最終的な「かたち」にしてくれる、 フロントエンドエンジニアを募集します。 どんなアイデアも、ことばも、ビジュアルも、 思いも、冗談も、商品も、情報も、 最終的には、ひとつの「かたち」にして、 読む人に届けなくてはなりません。 ほぼ日刊イトイ新聞をめぐるさまざまな総量は、 年々、大きくなっています。 やりたいことも、つくりたいことも、 発見したことも、試したいことも、 そして、そ

    「ほぼ日」のフロントエンドエンジニア募集。
  • http://alfalfalfa.com/articles/139689.html

  • UXグラフツール - UX評価 インタビューサポートツール

    UXグラフツールは、製品やサービスを使ったユーザー体験を、グラフチャートにして分析するためのサポートツールです。 UXグラフツールを使うことで、製品やサービスを利用したエピソードの中でよい点・悪い点がわかりやすくなり、ユーザーがより満足できる体験を設計することができます。 1.体験エピソードの入力 2.満足度グラフを操作 3.PDFで保存・活用 UXグラフツール UXグラフβ版 Ver. 0.2 に移動します。ツールはご自由にご使用いただけます。 (for PC Win/Mac latest modern browser) お使いのブラウザは、Internet Explorer です。 UXグラフツールは、Internet Explorer には対応しておりません。 UXグラフツールが、Internet Explorer で使えない理由 Internet Explorerは、microso

    UXグラフツール - UX評価 インタビューサポートツール
  • 高円寺PAL商店街に古着店続々 「古着の街」として再び話題に

    PAL商店街はJR高円寺駅南口のアーケード商店街で、全長250メートル、約100店舗で構成される。「東京高円寺阿波おどり」発祥の商店街としても有名だ。 同商店街は家賃が高く古着店の開業は難しいとされていたが、3月9日現在で9店の古着店がある。2月にオープンした「BIG TIME」「SLUT」など、新品を販売する店舗を含めると2016年に入りアパレル店が3店オープンした。 中でも70年代のカントリーやフォークロアの商品をそろえる「gREEN DOT」はオープンから今年で14年目を迎える。ダメージがある場合の手直しや、日人に合ったリサイズもスタッフが行う。店内は地中海の別荘をイメージし、インテリアやディスプレーにもこだわりを見せ、通信販売も人気だという。 同店に10年勤めた店長のともえさんは「昔はPALに古着店は一件も無かった。高円寺の玄関商店街とも呼べる通りに、古着店が増えるのはうれしいこ

    高円寺PAL商店街に古着店続々 「古着の街」として再び話題に
  • ヤマハのトロンボーン 人工宝石で高級感 - 日本経済新聞

    ヤマハのトロンボーン「Xeno(ゼノ) YSL-882O20TH」京セラが開発した人工宝石「京都オパール」を装飾に採用して高級感を出した。トロンボーン奏者の森岡

    ヤマハのトロンボーン 人工宝石で高級感 - 日本経済新聞
  • デザインリサーチを体験する「カレーライス」ワークショップ - 建築・デザイン・まちづくりを思考する - ケンチククラブ

    「デザインリサーチとはなんですか?」と聞かれることから、私の自己紹介が始まります。「文脈の理解と物語の構築をすること」と返答することもありますし、「言葉にならぬ『当たり前』を見つけることから始めるデザインです」なんて説明をする場合もあります。お答えした相手はほとんど頭の上にはてなマークが付いていることが多いので、まだまだ自分の言葉になっていないんだということを実感します。 事例を話すことで理解してもらえることがほとんどなのですが、そんな時間がない場合には困ってしまいます。逆に時間を持って疑似体験できる時には、ワークショップ形式でデザインリサーチャーを体験してもらっています。 デザインリサーチャーになるカレーライス・ワークショップ(所用時間:45分) 〈目的〉 デザインリサーチの役割や方法を理解すること 〈道具〉 ・A3くらいの用紙 ・太いペン 〈やり方〉 人数が多ければ3名以上でグループを

    デザインリサーチを体験する「カレーライス」ワークショップ - 建築・デザイン・まちづくりを思考する - ケンチククラブ