タグ別アーカイブ: デザイナーさんへ

多言語対応サイトでは訪問時にどうサイトを表示させるのが良いだろう?

Published / by hihihi / Leave a Comment

タイトルまんま。

ええっと、表示方法や出し分け方法っていろいろ手法があるんやんな、どれがえんやっけ。今まで悩んだこと無いの、なんでやっけ。

サイトで多言語対応するにあたっての、ブラウザ言語設定での切り替え・出し分け・ローカライズ(?)に関する考察。

ユーザーにとってほんとに良いのはどういう挙動だろう?

これの最適解まとめたのってあんま見たことないなぁ〜と思ったので、時間出来たので調べてみました。そして調べる最中頭こんがらかったり、情報整理する必要が出たりしと挫折しそうになったので、同志のために記事にまとめました。あかんところあったらゆーて下さい。

頭に浮かんだ手法羅列

  • いったんデフォルト言語で出してユーザーが必要に応じてボタンなどから切り替え
  • URLのクエリで言語設定して該当言語のコンテンツをPHPでインクルード
  • ブラウザ言語設定を参照して該当言語のコンテンツを格納したページへリダイレクト
  • ブラウザ言語設定を参照してajaxでコンテンツをページ内で出し分け
  • PHPロケール情報から判定
  • 各言語ページの一個上の階層に親ページを用意して選択
  • 文字サイズボタンみたいにcookieで記憶させといて2回目以降訪問時に出し分け
    「コンテンツの表示の仕方」と「ユーザー言語の判定の仕方」と「ディレクトリ(URL)の作成方法」の問題が全部ごっちゃになってますが、いったん羅列、です。

結論

訪問時は特に出し分けはしない、もしくはサイトTOPへの初回訪問時のみブラウザ言語設定の言語のコンテンツを表示させるなどする(手法はJSでもPHPでも。)

サイト内に言語の切り替えボタンは必須。そこからユーザーの意志で各言語に行き来出来るようにする

最終で見ていた言語をcookieで保持しておいて次回訪問時にコンテンツをajaxで出し分け、とかもできればしない。(ユーザーが意図せぬ挙動となる可能性・検索結果が最適化されない問題)

ディレクトリ等コンテンツ自体を各言語で作成し、URLさえ叩けば目的言語のコンテンツに行けるようにするのが吉。

以上。一般的にはこうかと。もちろんコンテンツの内容や構成、目的によって例外もあり。理由は次項「理由」にて。

ex)
日本語
https://example.com/
https://example.com/about/
↑↓(※共通パーツとして各言語間を行き来出来るボタンをサイト内の目立つ位置に置く)↑↓
英語
https://example.com/en/
https://example.com/en/about/

一番単純なのが吉ってことですね。

今まで悩んだこと無いのは最適と思われる形が単純なものだったからか。

出し分けの具体的な手法メモったのは下の方に移動しました。ほんとは真っ先に調べたんだけど。
記事書いていろいろ情報をたどる間にいろいろ変にいじんないほうが良さそうだなーってなったので。

理由

サイトの情報を利用するのはエンドユーザーだけではないから。検索エンジンのクローラーに正しい情報を提供する→エンドユーザーを適切なコンテンツへ導く手助けにもなるよねって話。

(さらに…)

今週の開いてたタブ

Published / by hihihi / Leave a Comment

CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス

CSS Shapesでテキストを回り込ませるレイアウトを表現


IEはfloatでええわ。

PhotoshopでSVG書き出しを行う際の注意点 – Qiita
https://qiita.com/hibikikudo/items/d5c1a87768f5de2d71bf#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95P
デザイナーさんへ。
(さらに…)

インスタAPI連携をPHP使わずJSだけで実装する危険性について

Published / by hihihi / Leave a Comment

JSのみで実装してしまうことの危険性

以前JSのみで実装をしていた人にアカウントに紐づく普段は見れない情報を平文で書いてしまうなんて。。。という話をしていたのですが、なぜだめなのかをうまく説明できなかったのでまとめを探した。

アクセストークンを平文で書いてしまうことの危険性

http://guisekit.com/web/instafeedjs/
http://guisekit.com/web/instagram/

https://syncer.jp/instagram-api-matome#sec-14

(さらに…)

俺が考えるレスポンシブ対応最新のブレイクポイント 2017

Published / by hihihi / Leave a Comment

max750pxブレークでサイトを作ることが多かったのですが

タブレット対応のお話をしていて、ふとそういや最新ってこれでほんとにこれのままじゃろか。えんじゃろか。と、調べ直したのでメモ。
お客さんに多分これじゃね〜?とか言えないもの…!言えないもの…!

レスポンシブの現状最新のブレイクポイントってどないなっとんぞ

iPhoneXの投入による変更などは特に無かったようですし、
余裕があれば下記のようにするのでしょうが…

(さらに…)

デザイナーさんにfaviconとapple-touch-iconについて伝える

Published / by hihihi / Leave a Comment

メモメモ
=====

必要ならご用意を。生成サービスあります。
http://www.favicon-generator.org/

いろいろあるけどこれが最新仕様準拠みたいです。

ファビコンとapple-touch-iconとandroid-icon設定、作り方

種類多いですが、端折っても大丈夫な模様。

faviconをマルチファビコンとapple-touch-iconの2枚で済ます!


とりあえず作成したものとコードを貰えればそれをWPに設置します。

フォントウェイト

Published / by hihihi / Leave a Comment

デフォルトのデバイスフォントのフォント名でフォントウェイトって指定できるの?ってきかれたから久しぶりにあのサイトみながら説明した。

標準の日本語フォント / もうパンツはかない
http://rinrin.saiin.net/~aor/fonts/fonts

font-weight-スタイルシートリファレンス
http://www.htmq.com/style/font-weight.shtml

・フォントウェイトはフォント名じゃなくてcssのfont-weightで設定するよ
・W3とかW8とかじゃなくて大体nomalかboldの2種類だよ
・200とか400とか数値でも設定できるけど用意してなかったら同じウエイトになったりするからほぼ通常か太字にしかしないよ

transitionの動きを見てもらいたいとき

Published / by hihihi / Leave a Comment

ハムさんのサイト。
各プロパティの値の挙動が確認できる。イージングとか。遅延とか。
CSS3のtransitionプロパティでアニメーションを試してみた | THE HAM MEDIA BLOG
http://h2ham.seesaa.net/article/182989666.html