[B! webデザイン] stealthinuのブックマーク

デジタル庁のサイトやばすぎるwww - Qiita

はじめにみなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ﹁やっばw﹂と思いました。これからこのサイトのやばさを語っていきたいと思います。洗練されたシンプルさ、そしてデザイン僕は最初見たときびっくりしました。﹁なんてシンプルで見やすいんだ！﹂官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。やばいですねこれ。そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ

stealthinu 2023/06/12

デジタル庁がこうやって基準やお手本を示すことで他の市町村の行政サイトが標準的になっていくだろうから、とてもいいことだと思うな。

リンク

About Us | Hakuba Digital | Tourism Web & Digital Experts

stealthinu 2022/02/12

白馬で外国人の方がWeb作成会社作ってたのね。しかも元々Evergreenさんで働いてたらしい。あのネットワーク組んだ方だったりするんかな？

リンク

未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita

エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。だいたいうまくいったので、メモがわりに晒しておきます。前提条件誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで︵動きのエフェクトやカルーセルを仕込める程度︶ concrete5 テーマの開発︵PHPファイルに foreach を入れていくイメージ、WordPress と変わらない︶流石にアプリケーション開発で7日間は無理

stealthinu 2019/03/26

無茶な話をと思ったが参考になる話だった。もともと適正高くないと難しそうだが運良くいい人が来たらできそうな気がしないでもない。

リンク

bootstrap-navbar-toggler-icon-not-visible-but-functioning-normally

stealthinu 2018/07/10

Bootstrapのナビバーでハンバーガーメニューのアイコンが表示されない（アイコン表示されないだけで動く）のはnavbar-inverseの代わりにnavbar-lightにすれば解決した

リンク

ナビゲーションバー～Bootstrap4移行ガイド

Bootstrap3.xの設定例赤背景が変更箇所 <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navber" aria-expanded="false"> <span class="sr-only">ナビゲーションの切替</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navba

stealthinu 2018/07/09

navbarの書き方、Bootstrap3→4で全然違うじゃん… うええ。

リンク

CSSで文字にボーダー(縁取り)をつけたい。 - かもメモ

Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。といっても、イラレの線やPhoshopの境界線みたいにバチッとした縁取りを付けるのは難しそうです。 1. text-stroke を使う方法 text-stroke サポート状況IE以外はそこそこサポートされてきてるっぽい。プロパティには-webkit-のブレフィックスが現状では必要。(なぜかFirefoxも。-webkit-text-stroke ってプロパティ名？) 書き方 /* width | color */ -webkit-text-stroke: 2px #000; 又は -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #000; ボーダー(縁取り)は文字の内側に付く ※ color:

stealthinu 2018/06/29

CSSでふちどりフォントにする方法。

リンク

若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA

ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル︵Image ReadyやFireworks︶から画像を切り出す﹁スライス機能﹂と相性のいい方法でした。 <table border="0" cellspacing="0" cellp

stealthinu 2018/05/18

あー、懐かしい話だな。

リンク

LINE 桜川さんの話す「もっと読んでもらうための工夫」が実用的すぎてめちゃいい #AWAsia #LINE_AWA - @d_tettu blog

2018年5月14日〜16日に、東京ミッドタウンで開催されているAd Week Asia。会社の偉い人から関係者向けのチケットをもらったので行ってきました。何を聞こうかな〜とパンフレットに目を通していたら﹁スマホ時代のコンテンツデザイン﹂なる講演を発見。LINE・桜川さんのお話がめちゃ良かったのでメモを残しておきます。こんな風に﹁より届けるべき人に届ける、よく読んでもらうために何をするべきか？﹂を考え続けてるのいいな〜。みんな読んでね。ちなみにほか記事は以下 Googleは、機械学習でどうマーケティングを変えようとしているのか #AWAsia - @d_tettu blog 6秒でメッセージを届ける方法とはーーYouTube動画広告の効果的な作り方 #AWAsia - @d_tettu blog﹁伝える﹂は奥が深い。メディア編集者3人が語る”これからのストーリーテリング” #AWA

stealthinu 2018/05/14

すごい。スマホで見てもらうためには細かな工夫が必要という話。レスポンシブデザインとか言ってたら笑われるな。 ●スマートフォン ●webデザイン

リンク

誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック

【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しましたデザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？・最終的に何を言いたいのか結論が見えないよ。・関係性が複雑すぎて理解しずらいんだけど。・要素が多すぎて全てを把握するのが大変。・何をどこから見れば良いの？・結局一番言いたいことはなんなの？・文字サイズがたくさんありすぎてまとまりがないね。・安っぽいチラシみたいでダサイなぁ。・全体的にバランスが偏ってて不安定。・

stealthinu 2017/01/25

デザインで基本的に気をつけることのまとめ。

リンク

ウェブ業界の流行りはクズ。：村上福之の「ネットとケータイと俺様」：オルタナティブ・ブログ

村上福之です。ウェブ業界のはやりは普通の人にはクズだと思うことが、ここ数日ありました。レスポンシブはクズヤフーも食べログもクックパッドも東洋経済もレスポンシブでないことが全てを物語っている。レスポンシブはWeb業界寄りな人には結構普通でした。なにより工数が大幅に削減できます。ぼくも今まで、結構普通だと思ってましたが、サイトの種類によっては普通の人には使いにくいようです。普通に何も考えずにレスポンシブにすると、やはりなんだか使いにくいし、デザインもよくないです。PCとスマホで同じ情報を掲載すると、スマホが縦長くなるか、PCがさみしくなるかどっちかです。ファーストビューもよくない。縦長になりやすい。レスポンシブよくない。まぁ、ペライチサイトとか、バイラルサイトなどはそれでもいいと思います。とりあえず、ヤフーとか食べログとかクックパッドとか東洋経済っぽいのが大事だと思いました。最近。だって

stealthinu 2016/12/20

『使いやすいって、カッコイイことじゃないんですよ』この指摘は正しいと思う。ツール系のサイトの場合はヤフーとか食べログとか…をめざしたほうがいいんだろう。

リンク

20160930 フロントエンド高速化業務編 (社内勉強会)

スタートアップやプロダクトの成功に必要な「アイデア×プロダクト×実行×チーム×運」の 5 つの項目について解説した概要のスライドです。急成長するプロダクトの初期に役立てていただければと思います。プロダクトマネージャーやスタートアップの CEO の方向けにどうぞ。 ※ Japan Product Manager Conference 2016 の登壇資料です

stealthinu 2016/10/06

CSSやjQueryの最適化の話。jQueryの方はこれで速くなるんだろうとは思うのだけどなんか悲しくなるものが多い。

リンク

16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）

2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。というわけで少々前置きが長くなりましたが、今回は昨今

stealthinu 2016/08/03

スマホのUIのトレンド。

リンク

Scanstyles does nothing in Webkit/Firefox/Opera と IE11 で表示される

Internet Explorer 11 を利用していて「Scanstyles does nothing in Webkit/Firefox/Opera」とダイアログが表示される現象について。 curvycorners という div 要素などを角丸にできる JavaScript ライブラリが、IE11 に対応していないため出てくるメッセージです。バグですね。 IE11 の user agent の変更により IE 判別で間違って、最終的に alert を出す仕様のようです。神戸市三宮の研修・貸会議施設 – スペースアルファ三宮 | 富士ゼロックス総合教育研究所が利用していたので気付きました。互換表示設定により対応とりあえずメッセージを非表示にするには、Alt キーを押してメニューの「ツール」から「互換性表示設定」を選択。対象の URL を追加しましょう。参考： IE 11 の

stealthinu 2016/07/07

IE11で「Scanstyles does nothing in Webkit/Firefox」と出てくるエラーはcurvycornersという昔、角丸にするために使われてたライブラリがIE11対応してないために出る模様。とほほ。

リンク

CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！

CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の﹁表示形式﹂を指定するプロパティ。ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。構造的にはブロックレベル要素なんだけど、インラインとして表示

stealthinu 2016/06/20

inline-blockとinlineはどう違うのか勉強になった。さらにIE7でinline-blockが問題出ることの対処法もあり。

リンク

幅可変でmargin:0 auto; ~display:tableの不思議~ - Qiita

概要 inline要素のようにテキストの長さによって要素の幅を変え、さらにその要素をmargin:0 autoで中央寄せに出来ないかっていうのを以前に悩んだのですが、対応策があったので紹介します。ちょこちょこ使えて意外に便利だったっりします。試行錯誤 marginをかけるのでinline要素では無理で、block要素だと幅が親要素に依存してしまうので

stealthinu 2016/06/10

インライン要素でもmargin autoでセンタリングする方法。display tableにする。表示結果まとめたページがわかりやすい。 ●css ●webデザイン

リンク

CSSで中央寄せにする方法まとめ | たねっぱ！

CSSで中央寄せ方法(inlineやblockで方法をかえよう！)。text-align:centerやmargin:auto。レスポンシブの場合なんかも紹介します！ CSSで中央寄せにする方法(inlineとblockで方法をかえよう！) おはこんばんちわ、やのっぱです(´・ω・｀) そういえば、周りでcssによる中央寄せがうまくいかないって声をよく聞いてたのでいくつか書いてみたよ。思いつく限りの中央寄せの方法を書きます。注意！本記事はreset.css、clearfixを導入した状態を基準としてソースコードを載せています。1．margin: 0 auto;︻block要素を中央に︼定番の中央寄せです。でも、要素がwidth:100%;だと無理です。 margin取れないからです。例︶ <style> .marginTest { width:100%; height:40p

stealthinu 2016/06/10

CSSでセンタリングする方法まとめ。インライン要素だとtext-alignで、block要素だとwidth決めてmargin autoで。要素と方法合ってないとセンタリングされない。 ●css ●webデザイン

リンク

UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる | Ledge.ai

TOP > Techno logy > 注目テクノロジー > UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてるこんばんは、イイノです。つい先日にはAdobeXdのプレビュー版がリリース。プロトタイプが本格的に現場に浸透するぞー！なんて、話題になってますが、個人的にはXdを超える？なんて思えるプロトタイピングツールを発見してしまったので、紹介してみようかなと。これまでのプロトタイピングツールでは難しかった﹃複数人プロトタイピングでの挙動をトラッキング分析﹄や、﹃個別＆全体での行動をレポーティング﹄といった機能を搭載し、なんと無料で利用可能にしてしまったという衝撃のツール﹃CanvasFlip﹄。インドの天才たちが作ってくれたこのツールで、プロトタイピングとユーザーテストの手順や手間やコスト、その他もろもろな常識が変わってしまう？…かも

stealthinu 2016/04/28

デザイン画像とそれをつなぐリンク先設定するだけで実際に動くプロトタイプとして確認できてレポート化までしてくれる。

リンク

サービス終了のお知らせ

平素より﹁PHPプロ！﹂をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました﹁PHPプロ！﹂ですが、サービスの利用状況を鑑みまして、2018年9月25日︵火曜日︶をもちましてサービスを終了させていただくことになりました。サービス終了に伴いまして、2018年8月28日︵火曜日︶を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。本件に関するお問い合わせはこちらよりお願いいたします。

stealthinu 2016/03/10

いまさら携帯向けのコンテンツも作らないといけなくて携帯での文字コードやCSSについて参考に。こういう情報はどんどん失われていくので困る。

リンク

モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ

こんにちは、﹁livedoor Blog﹂を担当している吉沢です。スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blogでは、スマートフォン分野に注力しながら、月間15億PVあるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blogで採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。アクセスシェア〜ライブドアの場合まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。1年前と比べると、iモードブラウザ2.

stealthinu 2016/03/10

いまさら携帯向けのコンテンツも作らないといけなくて携帯でのHTMLやCSSの対応状況を確認していて大変に参考になった。

リンク

エンジニアのための「Sketch入門！」　1時間コース - Qiita

※﹁Sketch﹂はMac専用アプリです。Windows版はありません。﹁演習ファイル＋動画＋演習付き﹂で記事を書いてます。エンジニアの人から﹁Sketch使ってみたい﹂﹁日本語の記事が少ない﹂という声を聞いて、最近社内で勉強会しました。Sketchについて日本語の記事を調べてみたところ、このレベルの記事はけっこうありました。ただ、学びやすいか？といえばそうではないらしいので、少し工夫して学びやすいように書いてみました。ハンズオン用などにご利用ください。SketchとはSketchについて一応さらっと書いておきます。・アプリやWebのデザイン・UI設計などに使われるMac用アプリケーション IllustratorやFireworksのようなツールです。・$99 買いきり(2016/02 現在︶　有料です。ちなみにApp Storeでは買えなくなりました。ショバ代かかるか

stealthinu 2016/03/09

Mac用のアプリデザイン、Webデザイン専用デザインツール。$99

リンク

はてなブックマーク

タグ

関連タグで絞り込む (64)

webデザインに関するstealthinuのブックマーク (222)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第5週）

今週のはてなブックマーク数ランキング（2024年6月第4週）

今週のはてなブックマーク数ランキング（2024年6月第3週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス