タグ

hinaesanのブックマーク (366)

  • レスポンシブに最適FlexBox。Android4.3以前標準ブラウザ、IE10にも対応させる方法! | 埼玉県熊谷市 Webデザイン・企画・制作「デザイン事務所|エイビッツ」

    マルチデバイス対応=レスポンシブ ではない! マルチデバイス対応、レスポンシブレイアウトでのWeb制作はここ数年(ここ2,3年の事ですね。)ですでに当たり前のものとなってしまいました。 以前はスマホ対応をするかしないかをお客様に確認していましたが、現在では有無を言わさずのようです。 レスポンシブサイトはGoogle大先生が推奨しており、またワンソースですべてのデバイス(ガラケーを除く)に対応できる謳い文句からお手軽感をお持ちの方も多く、「マルチデバイス対応=レスポンシブ」 の印象が強いですがそうではありません。マルチデバイス対応の中の構築法の一つとしてレスポンシブデザインがあります。 レスポンシブの構築は、従来から使われているフロートでのレイアウトにメディアクエリを加えての構築方法が主流でした。 この方法は、ある程度古いバージョンのブラウザでも対応可能です。 反面、デバイス幅によってレイア

  • 日本ゲームスタッフリスト協会(凍結中) 仕事育児他色々で激忙なんで復帰はもう少しお待ちください スタッフロール録画したファイルが1000超えてるわ by.BGR-44

  • ニコニコ動画(Re:仮)

    ニコニコ動画(Re:仮)
  • これでもう悩まない!2017年のデザイントレンド完全ガイド

    2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジーファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表!確認しておきたいポイントとは? 2017年のWebデザインはどうなる?

    これでもう悩まない!2017年のデザイントレンド完全ガイド
  • ナビメニュー100連発!CSSで表現できるコピペ可能なHTMLスニペットまとめ

    ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTMLCSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い!代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ

    ナビメニュー100連発!CSSで表現できるコピペ可能なHTMLスニペットまとめ
  • BeerCamp at SXSW 2011

    Get ready for battle. This year, the BeerCamp competition will take form in a flip cup tournament. Team registration is now complete. Each member of the winning team will walk away with a Flip HD Video Camera. Tournament will consist of 32 teams, single elimination. Matches are best-of-3 games. First team to win 2 games wins the match. Teams consist of five players. All teams must sign up with fiv

  • OGP画像シミュレータ | og:image Simulator

    OGP画像シミュレータとは? FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 (2014年01月

    OGP画像シミュレータ | og:image Simulator
  • 【HSP製】D-STARS Ver.1.00を公開しました。

    超お久しぶりです。 というわけで、twitterのほうにはチョコチョコと画像を上げていましたが、 ついに自作STG,「D-SATRS」がVer.1.00になりました。 日、各所へのアップロードをしておりますので、反映され次第、ダウンロードできるように なると思います。 各公開サイトへのリンクは、こちらからどうぞ。 http://tuiskeimode.web.fc2.com/game/toppage.html コメントや報告を受け付けたいので(あまりありませんがw) 一時的にtwitterからのツイート連携を外し、しばらくこの記事を固定するつもりです。 ご意見ご感想は、各公開サイトのコメント欄、またはこのブログのコメント、twitterのいずれかへ お願いいたします。 「遊んだよ!」「楽しかった」「ここをもう少し改善してほしい」など、なんでもいいのでご意見 いただけると、作者が喜び悶えま

    【HSP製】D-STARS Ver.1.00を公開しました。
    hinaesan
    hinaesan 2016/10/27
    引っ越し終わったらこれも遊びたい。
  • Google Fontsの日本語フォント「Noto Fonts」の使い方

    そしてもちろん我らが日語も用意されています。日語のフォントセットは「Noto Sans CJK JP」という名前です。 日語は優遇されているのか7つも異なるウエイト(太さ)が用意されています。 ちなみに名前にあるCJKとはChina、Japanese、Koreaの3つです。1バイト言語の256文字に収まらない、2バイト言語をまとめてCJKとしているようです。(2バイト文字は65536種類に対応している) 中国語は「Noto Sans CJK SC」、韓国語は「Noto Sans CJK KR」と、それぞれ別のセットで、相互に対応していません。統一感のあるセットになっているとのことですが、それぞれの言語が混在する状況はあまりなさそうです。 2バイト文字は数千もの文字を作成する必要があるため、Adobeだけではなく各書体メーカーの協力しています。それぞれ日語はイワタ、中国語はChang

    Google Fontsの日本語フォント「Noto Fonts」の使い方
  • モダン日本語フォント指定

    CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…

    モダン日本語フォント指定
  • nicoLivew - Hatena::Let

    hinaesan
    hinaesan 2016/10/04
    bookmarklet ニコニコ生放送
  • ドッターはマゾなほど優秀ってホント? 現役ドッターたちが語るドット絵の過去と現在

    ドット絵。わずか数ドットの狭い空間にあらゆるものを描いていく、グラフィック技術。そして、そのドット絵を担当するグラフィックデザイナーが、ドッターだ(ちなみに、ドット絵は1ドットのマスに点を置いて作られていくため、「描く」ではなく「打つ」という表現が使われることが多い)。 1990年代中期までのゲーム業界ではグラフィックと言えば、それはドット絵を指すと言っても過言ではなかった。だが、プレイステーションの登場により、ゲーム業界にはポリゴンを使った3DCG化の波が押し寄せた。……ドッター冬の時代の到来だ。 しかし、ファッションの流行の周期のように、近年のケータイアプリの台頭や海外で起きたレトロなドット絵ブームによって、再びドット絵に注目が集まりつつある。 さらなる需要の高まりを見せるドット絵界隈を、現役のドッターたちはどう思っているのか? 長年ドッターとして活躍するエイリム・小林光氏と日一ソフ

    ドッターはマゾなほど優秀ってホント? 現役ドッターたちが語るドット絵の過去と現在
    hinaesan
    hinaesan 2016/09/06
    ドッター歴まだ半年強なので勉強になる。
  • Kuniyoshi KANEKO 金子國義のゆかた 紅蝙蝠

    Kuniyoshi KANEKO 金子國義のゆかた 紅蝙蝠

  • マインドフルネスで、脳を休息させよう | ライフハッカー・ジャパン

    いつも疲れていたり、どれだけ休んでもだるさがとれなかったり、集中力が続かず、いろんなことが気になってしまったり...。そういうことは、多かれ少なかれ誰にでもあるのではないでしょうか? そんな人は、身体ではなく、脳が疲労しています。 たいていの人は、「休息=身体を休めること」だと思い込んでいます。(中略) しかし、それだけでは回復しない疲労があります。それが脳の疲れです。(中略) 脳疲労は肉体疲労とは根的に異なりますから、どれだけ身体を休めても、知らないあいだにどんどん蓄積されていきます。 そして、それが積もり積もって慢性化すると、人生のあらゆるパフォーマンスが低下し、ひどいときにはいわゆる心の病へと至ります。(「はじめに──科学的に正しい『脳の休め方』」より) そう語るのは、『世界のエリートがやっている 最高の休息法――「脳科学×瞑想」で集中力が高まる』(久賀谷 亮著、ダイヤモンド社)の

    マインドフルネスで、脳を休息させよう | ライフハッカー・ジャパン
    hinaesan
    hinaesan 2016/08/08
    佐山先生から授かった自己催眠(要は自己暗示)の儀式「士禅」の方法と、とてもよく似ている。感情に流されないように自分の状態を客観視する習慣は、仕事でも育児でもメチャクチャ役立ってるのよね。
  • 細かすぎて伝わらないアンチエイリアスの話

    はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい:photoshopのアンチエイリアスについては、基的には5種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の5種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の4つに関しては シャープ:文字が太い / くっきり 鮮明:文字が細い / くっきり 強く:文字が太い / なめらか 滑らかに:文字が細い / なめ

    細かすぎて伝わらないアンチエイリアスの話
  • CSSのフォントサイズの指定の仕方 - Qiita

    px pxとは、画面の色情報を持つ最小単位 例えば、font-size:16pxのときに1文字は、1pxが縦16個・横16個並んだの正方形の中に表示される em emとは、1文字分を表している単位 ページでfont-sizeを何も指定していない場合、どのブラウザでも16pxなので、1em=16pxになる emの由来 emは印刷業界で用いられていたもので、組版における相対的な長さの単位。emという呼称は大文字Mに由来しており、古くはMの活字の字幅とボディサイズがほぼ一致し、正方形に近かったため mではなくemなのは、ラテン文字のMの名称がemで、発音も/em/であったため rem rem (root em) は、常にルート(html)要素を基準にしたem emは親要素を基準にする emや%で指定すると、親要素の影響を受けてしまうので文字サイズの調整に手間がかかることがある % %とは、

    CSSのフォントサイズの指定の仕方 - Qiita
  • メンタルが弱く仕事も出来ない部下を劇的に改善したマネジメント方法を公開します

    こんにちは、新米主任です。 以前、職場の女性陣20人に対しての処世術を書かせて頂きました。 【関連記事】 熟女20人を部下に持つ僕の『お局様マネジメント術』 この記事には、工場のお局20人の他に『気の弱そうなメンズの若手正社員』が登場します。 このメンズ君…結構問題点を抱えていまして…。 職(商品開発・企画)と違う所でこき使われている悲しい新米主任ですが、今回はこのメンズ君1人に焦点を当てた指導方法について書いてみます。 マネジメント対象について部下のスペックと業務工業高校卒24歳(7年目)の正社員製造現場スタッフ(製造ライン作業、機械保全)地方採用で転勤無しの一般職扱いある製造ラインのリーダーを任されているが、スキル、リーダーシップが不十分で、パートのお局達の『言いなり』となっている現状。業務に関する知識面は女性陣より秀でているが、要領が悪い ≒ 丁寧だが仕事が遅い。 実績ではなく、『

    メンタルが弱く仕事も出来ない部下を劇的に改善したマネジメント方法を公開します
  • The Ultimate Guide To iPhone Resolutions

    UPDATE: We have added the new iPhone 11, iPhone 11 Pro and iPhone 11 Pro Max to the guide below. The device screen may have lower pixel resolution than the image rendered in previous step. Before the image can be displayed, it must be downsampled (resized) to lower pixel resolution. Physical Pixels At the beginning, coordinates of all drawings are specified in Points are abstract units, they only

  • 『デザインは8の倍数でできている』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか?」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ(サイズ)を指します。 【第1部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p

    『デザインは8の倍数でできている』
  • S5-Style

    ノーコードWeb制作プラットフォーム「STUDIO」 コードを書かずに、高度なデザインを。サイトは1クリックで公開可能。CMS、フォーム、分析ツールもオールインワン。 事業コンセプトの検証から、デザインチーム組成まで。おしゃべりAIアプリ「Cotomo」の立ち上げ支援について 2024年2月にStarley株式会社からリリースされた、音声会話型おしゃべりAIアプリ「Cotomo (コトモ)」。事業立ち上げに関わる、事業コンセプトの設計・初期プロダクトの設計・デザインチーム立ち上げをrootとして伴走しました。音声会話型AIという特殊なドメインにおいて、いかに事業の方向性を固め、プロダクト内の体験を検証したのか。また、素早いデザインチーム立ち上げをどのように支援したのか、事例をまとめます。 STUDIO導入時に知りたい!「STUDIOをおすすめできる/できないパターン」を無料配布します ca

    S5-Style