Webデザイン on akky@サイボウズラボ・ブログ

Single Page - 一ページだけすぐ編集してネットに公開できる1ドルサービス

Wed, 30 Nov 2022 00:00:00 +0000

Single Pageは、一ページだけのwebページをその場で作って公開できる、という有料サービスです。

Single Pageで一枚ペラのwebページを作成中。ページ上で直接編集ができる。

サイトを開くと、サイト自身の説明が書かれたエディタが開かれますが、このエディタを使ってページ内を自由に書き換えることができます。

作成したページは、singlepage.cc/ ドメイン以下の空いている好きなパスで公開できます。公開するのにページごとに1ドルかかります。

利点

サイトに書いてあるこのサービスの利点は以下

アカウントを作る必要が無い
ログなどは取られていないプライバシー対応
書いたものがそのまま最終形となる
世界中から高速で読める(CDN対応ってことかな?)
一回きりの支払いで、ソフトウェアの更新等はおまかせ

ブログのように、継続的に書きたいことが複数あるようなものではなく、一ページだけで完結する何かを公開したいときの手軽なサービスを目指しているようですね。

ユーザー登録すらなく、作成時に表示された削除フレーズをどこかにメモしておかないと、自分で作ったのに削除することもできません。後で修正する機能すら、今はなくて検討中だそうです。

1ドル取るのは、無料にするとスパム目的で大量にページを生成される恐れがあるからということ。少額でも徴収するのは一つの歯止めではありますが。

Hacker Newsのコメントでは、同様の1ページを軽く作れるサービスが10個ほども列挙されていて、無料のものもあるので競争力があるかはわかりません。いくつか見てみましたが、最初のページが既にエディタとなっていて書き始められるという開始のところが早いのは、「始めましょう」ボタンを押させたり、そこからユーザー登録が始まったりという他のサービスより特徴が出てるところかなとは思います。

違法なものや個人情報の暴露などには使わないでね、ということですが、一見匿名性が高いので悪用もされるだろうなと思います。クレジットカードで支払っていることから、完全な匿名ではありえないんですけどね。

via Hacker News

pixelguesser - あなたのwebデザインのサイズ感に挑戦するクイズ

Fri, 12 Aug 2022 00:00:00 +0000

Pixel Guesser(ピクセル当て)は、ブラウザ上でピクセル(px)指定されたサイズの矩形を答えるクイズサイトです。

幅と高さのpx がお題として出るので、マウスでそのサイズと自分が思う領域を指定します。

あなたが描いたサイズと正しいサイズがオーバーレイで示され、どれぐらい正解に近かったかに応じて点数が加算されます。10問解くと合計が出て終了。

ブラウザ上での矩形領域を勘で指定してうまく当てられると、デザインの速度にいい影響があったりしますかね? 日常的にデザインしてる人はやはりいい点数出るんでしょうか。

via Hacker News

Checkboxland - HTMLのチェックボックスですべてを作れるライブラリ

Tue, 12 Oct 2021 00:00:00 +0000

Checkboxland は、HTML のチェックボックス要素を活用してしまくるための JavaScriptライブラリです。

HTML のチェックボックス要素と言えばこれ↓ ですが、

このチェックボックスを使って様々な表現を実行できます。

デモでは、文字が横に流れるマーキー、デジタル時計、アニメーション、QRコード表示、ライフゲーム、動画再生(!)、など様々な表現が、すべてチェックボックスだけで実現されています。

API documentによれば、チェックボックスを縦横に並べたグリッド上でグリッド上の各座標を調べたり書き換えたりする低レイヤAPIと、文字を大きく描く、スクロールさせる、画像や動画を描写させるなどの拡張APIが用意されています。プラグイン機構も用意されているので、自分で Checkboxland に新たな機能を追加することも可能です。

It's Friday night so of course I'm eating cookie dough and making a QR code out of html checkboxes that always tells you the current time.https://t.co/ZNjG0SWAce pic.twitter.com/Fywf7FZFpu
— Bryan Braun (@BryanEBraun) May 23, 2020

多数の要素を表示しようとするとページが重くなるのはチェックボックスであっても(当然)同じで、チェックボックスの数が1500個を超えるとチェックボックスの更新速度が問題となることから、32x32 や 64x16 といったサイズ以下のグリッドを推奨するそうです。

I made a webcam filter out of html checkboxes.

Try it out here: https://t.co/1lBHfEgmhw pic.twitter.com/tZrFOg3PWl

PhotoChrome - 言葉からカラーパレットを作ってくれるサービス

Wed, 07 Jul 2021 00:00:00 +0000

単語を入れると、単語に関連した色からカラーパレットを作るというサービスが PhotoChrome です。

入力した単語から Unsplash の API で単語に関連した無料利用可能な画像を検索します。

写真の中から抽出した色を取り出して5色のパレットを作る、これだけでもまあいいかと思いますが、サービスは単語に関連する多数の画像をごちゃごちゃに混ぜ合わせ(smash)、混ぜた画像から5色を取り、明度を明るい物から暗いものまで調整してカラーパレットを出してくれます。

混ぜたほうがぼんやりしたパレットになることも多いように思えますが。

色の選択に行き詰って、新しいヒントが欲しいときに使うといいかもしれません。

via FlowingData

Minimal Twitter - ミニマリスト向けツイッター表示ブラウザ拡張

Thu, 13 Aug 2020 00:00:00 +0000

Minimal Twitter は、ブラウザ版ツイッターの表示から広告やトレンド、おすすめユーザーなどを除去し、最低限の要素だけを残すというブラウザ拡張機能です。

拡張をオンにすると、ツイッターの画面が以下のようになります。すっきりしてますね。

通常の表示がこちら。特に右側サイドバーの情報量が多いですね。世の中の様々な動きを知りたい時はこれはこれで役立つとは思いますが、いつも推薦が欲しいだけでもない、と。

拡張機能のオプションで、RTやイイネの数を表示しないようにするなど、さらに表示要素を減らすこともできます。(自らクリックすると、現在のイイネ数などは表示されます)

雑音の少ないピュアなツイッター道を極めたい場面などで使ってみるのもいいかもしれません。Chrome、Firefox、Safari 版(Safari版は登録料が掛かるので非公式で)が提供されています。

via Hacker News

Unim.press - redditのトップページを新聞紙面風にデザイン

Sat, 27 Jun 2020 00:00:00 +0000

unim.pressは、海外の巨大掲示板 reddit の最新人気記事を昔の新聞風デザインにして見せるというサイトです。

記事の本文は全部埋め草なので、タイトルで気になったら結局reddit にジャンプするんですけどね。できればコメントから記事本文みたいなものも生成してほしいところ。

記事にマウスを置くと、その記事の画像だけカラーになります。レトロ風味のモノクロと、気になった記事でちゃんと画像を見たいという気持ちを両立させた設計でしょうか。

新聞を何十年も読んできた人は特に、新聞の記事並びの形式に親和性があるでしょうし、ただ表のように順に並んでいるよりもこちらの方が楽という人はいるかもしれません。今起こっていることを俯瞰的にみられるという効果も… どうでしょうね。

それに、できた紙面を見ると懐古調というか、くだらないニュース(失礼)もなんだか意義のあるニュースに見えてくるということもあるかも。あるメディアを別のメディアの形式に置き換えるというアイデア、他にも何か作れるかもしれません。

via Hacker News

YesAQ - 「はい」になる回答だけを集めたFAQ

Wed, 03 Jun 2020 00:00:00 +0000

Basecamp というサービスの FAQ に特徴があるという書き込みがあったので、チェックしに行きました。

よくある質問(FAQ)を置いてあるウェブサービスは多いと思います。問い合わせが多い質問に対してあらかじめ回答を見せておくことで、サポートの人員を減らせますし、利用者もメール等の返事を待つことなく疑問が解消できます。

すべての答えが「はい」なら

Basecamp の yeaAQ は、すべての回答が「はい(Yes)」になるように質問文を書いています。

ドライブインの店頭に貼ってあった「すべての答えがイエスの貼り紙」にインスパイアされたものだそうです。

FAQ の質問文を読んでからそれに対する回答を読むことは、1つ目の質問という情報を頭の中に積んでいることになりますね。最初から答えが「はい」だとわかっている質問しか並んでいなければ、覚える手間がはぶけてわかりやすいのかもしれません。

逆に、Yes ほど受けは良くないかもしれませんが、すべてが No になるFAQ というのも作れそうですね。と思ったけどこれは公園の禁止事項の看板なんかで既にありそうかな。

作る方は、自然に答えがはいになる質問文しか書けないあたりで努力が必要そうにも思いますけど。よくある質問を「よくある」にしない工夫にする変化球的サイトデザインと言えるかもしれません。

悪のUIデザイン、ダークパターンの実例を見せる動画

Wed, 04 Apr 2018 00:00:00 +0000

ダークパターンについては2010年、概念が提唱された際にこのブログでも紹介しました。

ユーザー体験を向上させるのではなく、ウェブサイト運営側の都合でものを買わせたり、ユーザー登録させたりするウェブサイト構築上のトリックを分類して名前をつけよう、というのがダークパターンです。

先週、そのようなダークパターンを解説する動画が公開され、注目を集めています。

とにかく退会したいんだ!

動画の最初はアマゾン。「アマゾンを退会しようとした人はどうなる?」で、一回入ったらそこから出ることは難しい Roach Motel (ゴキブリホイホイ)ダークパターンの実例を見せています。(00:15)

アマゾンを止めようと思ったことがないので知りませんでしたが、日本語でも止めるための手順を説明するブログ記事がいくつもあり、なかなか止め方が難しいのですね。動画と同じように日本のアマゾンでも退会ページを目指してみたのですが、退会に関してはアメリカ版と同じサイト構造になっているようです。

直観的にまず開くであろう、上部ナビゲーションバーの「アカウント&リスト」からは、様々なリンクが表示されるものの、そのどこからも退会ページに辿り着くことはできないそうです。

動画が教えてくれる手順は、

ページ最下部のリンクから「ヘルプ」をクリック
「問題が解決しない場合は」から「カスタマーサービスに連絡」
1の「プライム、その他」タブを選んで
2のプルダウンから「アカウントの確認、変更、閉鎖」 (アメリカ版ではここが"Login & Security"だそうで、さらにわかりにくいですね)
もう一つ出てくるプルダウンから「アカウントの閉鎖」
「チャット」「電話」「eメール」のいずれかを選び、先方からの連絡を待つ

なるほどこれは大変ですね。多くの人は途中で諦めてしまいそうです。

メルマガ退会を難しく

次はニュースレター/メールマガジンの購読停止(02:15)。メールの末尾に購読中止のためのリンクがあり、それを開けばその相手からのメールはもう来なくなる、という仕組みは良くあります。

日本のメルマガでは手動で依頼しないといけなかったりするのがまだまだ多いので、これでも助かる方かと思いますが、動画作者はここにもダークパターンがある、と喝破しています。

購読中止のリンクが地のテキストと見分けにくい色や太さになっていたり、ガチャガチャと関係のない情報が列挙されて非常に探しにくくなっていることが多い、と言います。

言われてみれば、たしかにこういうのよく見ます。

流れで購入ボタン

3つめのスマートフォンゲームアプリでの事例(02:30)は、「ゲームを始める」「次の面へ行く」などのボタンを全部グリーンの角丸ボタンで続けた上で、ゲーム内課金のダイアログで「購入」の方を同じデザインのボタンで描画する、というパターン。

World White Webプロジェクト - 手足など人物の画像検索に人種的多様性を持たせようという活動

Mon, 01 Jun 2015 00:00:00 +0000

World White Web 、World Wide Web のワイドとホワイト(白)をかけたキャンペーンでは、“hand” や “foot” といった体のパーツ名で画像検索した時に、白い写真ばかりが出てきてしまうのでは、というのを問題として提起しています。

試しに"hand"でグーグル画像検索してみると、以下のようになりました。

確かに白っぽい手ばかりです。

世の中には色々な色の手や足があるのに、画像検索でそれが出てこないとすれば、何かしらの理由はあるのかもしれませんね。

英語をメインで使っている国の中で白人の割合が多いことが、白人モデルの写真の多様と画像検索トップの占拠につながっているということかもしれません。たとえば、「顔」とか「腕」といった漢字での検索では、英語での画像検索に比べれば、アジア系の顔や腕が多く出てきます。

とはいえ、広告等で白人が良く採用されるからか、あるいは西洋文化が幅を利かせているからか、白人の写真もちらほらと出てきます。黒人の画像はなかなか出てきません。

World White Web がこの「問題」を解消する方法として提唱しているのは、彼らのサイトに置かれた非白人の手や足の画像にリンクしたり、ソーシャルでシェアを勧めたりというもの。要するに画像SEO になるのですが、このやり方で実際にトップページに彼らの希望する画像が入ってくるかというと、ちょっと難しいような気がします。

ブログや新聞記事を書くときに、多様な肌の色の写真を使いましょう、という呼びかけは、テレビドラマの配役で人種の多様性の配慮が求められるアメリカらしさを感じますね。

via TheNextWeb

日本のウェブデザインがこんなに悪い^H^H違う理由

Wed, 13 Nov 2013 00:00:00 +0000

Why Japanese Web Design is so… Different?(なぜ日本のウェブデザインはこんなに…違うのか?) というのが、はてなブックマークで人気になっていたので読んでみました。

英語で日本のウェブデザインを語る記事は、良くわかってないものも多いのですが、今回のはかなり正確に現状やその理由を捉えているように思いました。ポイントをざっとまとめます。

禅庭などの文化、建築などで知られる日本のデザインが、ウェブについては15年も古く見えるのはなぜか?

人気サイトとして楽天を例に (同様の例としてヤフージャパン、ニコニコ、JR東日本、読売新聞なども)

詰め込まれた文字

小さな低解像度の画像群

多すぎるカラム

派手な色使いと動くバナー

Flashなど古い技術の使いすぎ

言語の違い

表意文字 - より少ない文字で多くの意味を持つ。日本人はここから短時間に多くの情報を読み取れる

強調手段が足りない - 日本語にはローマ・アルファベットにあるようなイタリックや大文字が無い

言語の壁 - 多くのウェブ技術は英語がオリジナル、最新の情報が翻訳されるのに時間がかかるので流行がが遅れて来る

日本人にとっては、漢字も絵文字も小さなバナーも、絵という点では同じなんですよね。

文化の違い

リスクを取らない - 出る杭を打つ文化。よりよい方法があっても他とあわせる

消費者 - 購入前に詳細な説明や仕様を求める。キャッチフレーズやオシャレ画像には簡単に乗せられない人達

広告 - 企業はウェブをもう一つの広告手段として見がち。ウェブサイトは対話ツールというよりパンフレットの凄いヤツになり、詰め込みが発生

都市の風景 - 渋谷などに代表されるネオン広告だらけの街やパチンコ屋やゲーセンの大音量。空間の貴重さはウェブでも余白を無駄とする

職業 - 求人サイトの大量のウェブマスター・ウェブ管理者の求人が示す、一人がサイト全体を手作りする傾向。逆にクリエイティブな人々は大企業を避ける

技術的傾向

レガシーなモバイル - iPhoneよりずっと前から折りたたみ携帯でモバイルウェブを使ってきたため、小さなページに詰め込む傾向が元からあった

webフォント - 中国語などもだが文字数の多さからwebフォントが実用でない。変わったデザインが必要な時、デザイナーはテキストより画像に走ることに

Windows XPとIE6 - 急速に減ってはいるが、特に企業でこれら古いものが使われている

webフォントについては、僕もStackoverflowで回答しています。

まとめ

東京は1980年代に見た未来のよう。大企業たちが退屈な大量生産品を売りつける一方で、すごい職人たちがとんでもなく美しく機能的な物も作っている。

良い面を探せば、日本でもUNIQLO, MUJI, CookPad, 紀伊国屋などが美学のあり機能的なウェブサイトを提供している。他がそこから学んで追いつくことを期待しよう。

自分の理解できる余白スカスカ系のサイトを並べただけじゃ、という気もしますが。ユニクロや無印は世界展開してますし、海外志向とか制作体制の一体化とかもあって西洋人に受け入れられやすいデザインなんじゃないですかね。

僕自身は、英語でよく言われるほど楽天のサイトが見にくいとも、使いにくいとも思わないのですが。

# そりゃ美しいか? といわれると、美しいとも思いませんけど。宣伝メールの受信のデフォルトをオフにさえしてくれれば、そこまで不満はない

記事のタイトル、最初は「なぜ…違うのか?」ではなく「なぜ悪いのか?」になっていたようです。この結びを見ると、やはり著者は日本のwebデザインを「遅れたもの」と捉える考えからは抜け出せていないようで、そこは残念ですね。

[追記] 元の記事、というかサイトごと消えていますね。アクセス超過で一旦コンテンツを消したようです。

[再追記] 復旧したようです

[さらに追記] The Bridgeが翻訳を公開しました

GetPrsm.com - アメリカ政府/NSAの新しいソーシャルネットワークPRISMに入ろう

Thu, 22 Aug 2013 00:00:00 +0000

アメリカ国家安全保障局(NSA)がグーグルやフェイスブックなど大手web企業のサーバー内を通るメールやメッセージを盗聴監視していたというPRISM計画は、エドワード・スノーデン氏の告発によって明らかになり、アメリカ発のwebサービスを使うことに対する信頼性を大きく損なうこととなりました。

今回出てきた getprsm.com は、そんなPRISM計画がもしも新登場のソーシャルネットワークだったら? というアイデアで作られた、きわめて今風のwebスタートアップのwebサイトです。

まずトップは、「すべてを共有するためのまったく新しい方法をご紹介します(Introducing a brand new way to share everything.)」

そりゃ「すべてを共有」する計画でしょうけど。本当の新興ソーシャルネットワークでも、同じ文句を使いそうですね。

「広告なし - 何にも邪魔されずに、あなたのコンテンツを共有できます」

「無限の容量 - 世界最大のデータセンターで、無制限に共有」

「3億2千万人の強み - あなたが知りあいすべてがみつかります。おばあちゃんでさえも」

3億2千万人っていうのはアメリカの人口でしょうね。実際はアメリカ国外もじゃんじゃん監視してるらしいですが。

「どこに行っても、どのデバイスでも」

どんなデバイスにも対応してるんですね～今の時代、スマートフォンやタブレット対応は重要でしょう。

主要取引先。誇らしげです。

これはすごいソーシャルネットワークだ、と登録しようとしたのですが、

「おっと、どうもあなたやあなたのデバイスは既に登録されているようですよ」というエラーになってしまいました。登録した覚えはないのですが、いつのまにか登録されてデータを共有していたようです。

via What If The NSA’s PRISM Was A Social Network