はてなブックマーク

2023年 08月 11日 読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察 カテゴリ： CSS3 HTML タグ：ルビ 日本語には漢字という難しい文字があり、未履修の漢字が含まれた文章を読むことは我々日本人にとってもなかなか困難なもの。 そういった人たちにもコンテンツを楽しんでもらえるようルビ（よみがな）を振ることは良いアプローチですし、今は殆どのブラウザがルビに対応しているため比較的簡単に実装できます。 例えば著者夏目漱石のぼっちゃんの一文をルビを振ってみると下記の様な見た目に

2021年 10月 27日 GitHub Actions を使って WordPress のテーマをデプロイ（アップロード）する カテゴリ： WordPress タグ：GitHub FTP を使ったアップロードが面倒なのでなるべく Git と連携したデプロイをしたい。そうなると CI のサービスが割と主流なんですが、GitHub Actions を使うともっとお手頃にローカルからサーバーへデータ転送ができるのでやり方を書いておきます。 レンタルサーバー WordPress のお仕事だとエックスサーバーやさくらインターネットを使うことが多いのですが、この場合は転送に FTP を利用します。 まず設定するのは、リポジトリにある Settings の secrets に FTP 情報などを登録します。 ここで登録する内容は外部から見えないので安心して利用可能。 テスト環境と本番環境など転送先サーバ

before, after といった疑似要素は単一の HTML タグに装飾を加える場合非常に便利。 ところが全てのタグに対して疑似要素が使えるわけではないので、例えば img タグに疑似要素を使おうとすると途端に思った描画がされず、驚いた人も少なくないかと。 本記事ではこれについてまとめておきます。 疑似要素が効かない HTML タグ まず HMTL5 のタグで疑似要素が効かないものは以下の通り brwbrcanvasembedobjectaudioiframeimgvideoinputtextareaselectlegendbuttondetailsfieldset 2021年8月17日加筆：button タグのコードに閉じタグが無かったため CodePen で正しい表記が出来ていませんでした。legend, button, details, fieldset には疑似要素が有効です。

チーム開発で Gulp や webpack を使うと、メンバーに設定ファイル（ Gulp なら gulpfile.js ）を共有することで同じ開発環境を瞬時に用意できるのが大きなメリットの一つですよね。 しかし個々の端末の設定によっては用意した設定ファイルのままだと利用できないケースもあり、その場合随時設定箇所を変更する必要が出てきます。 僕が一番遭遇するのは WordPress の開発で Gulp を利用している場合、Local というツールの Site Domain 設定値が人によって違っていることで、これを解決するために「設定ファイルのパス情報を修正しながら使うか、みんな同じ Site Dmain に合わせるか」などを考えないといけないのですが、そもそもこれを考えること自体がちょっと面倒なんですよね。 コマンド実行時に引数が渡せるプラグイン minimist それならコマンド実行時に

「このボタンを押せばメニューが出現する」という意味を持つこの UI は、そもそもこれをボタンと認識できる人がどれだけいるのか？が議論になってきましたが、今でも賛否両論あるものの、一定レベルに浸透したことで多くのアプリケーション・Webサイトで見られるようになりました。 Web サイトで採用するメリットは PC のように画面の大きなデバイスであれば、コンテンツの横やページ上部にメニューを表示する領域確保が容易です、しかしスマートフォンのような画面の小さなデバイスだとそうもいきません。 その問題を解決するためにハンバーガーメニューが発案されたわけです。 Apple マークアップをどうするか 三 をまとめるタグをどうするか。候補として上がるのは buttonadivul あたり思いつくのですが button タグは純粋にボタンのタグa タグはクリックを持ちますが、リンクを作成するものなのでボタン

2020年 01月 30日 エディタをVisual Studio Code（VSCode）に変えてSASS（SCSS）のコンパイルとライブリロードでサクサク開発！ショートカットの一覧も カテゴリ： PCツール タグ：エディタ 一時期 VSCode を使うも Atom に戻っていたのですが、 どういうわけか GREP 検索ができなくなってしまい 再び VSCode を使うことにしました。 どうせならプラグインも見直してしっかりメインエディタになるように設定もしたのでそのあたりを書き留めておきます。 Visual Studio Code（VSCode）とは Microsoft が提供しているオープンソースのエディタで、MacOS・Windows・Linux で動作します。 https://code.visualstudio.com/ gulp も webpack も使わずエディタベースでSAS

あけましておめでとうございます。本年も当ブログをよろしくおねがいします。 さてさて、タイトルは SNS で最近良く目にするワードで個人的に気になっているところなんですが、最近というかここ数年でWebサイト制作の仕事はかなり分業化が進みました。 東京では分業化しているという話をよく耳にしていましたが、ここ数年大阪でも分業化している会社の話も聞きますし、僕自身案件によって分業で行うケースも少なくありません。 このまま進めばたしかに Web デザイナーはコードがかけなくても、Webサイトのデザインのみに注力して仕事ができるだろうという感覚もあります。 分業化で得られるメリットは下記あたりでしょうか 作業を分業化することで、自身の携わる分野に特化してスキルが伸ばせる。スキルに特化して仕事に注力できるキャリアプランを考えやすいチームの生産速度が上がる 分業化することで、1人で全部を覚えるより、ひとつ

フォント 配色と同じくガーリーに合わせるフォントがしっくり来ます。オールド体やスクリプト体などが合いますね。個人的にはやはり丸明オールド！ 明朝体 丸明オールド アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈（たいくつ）しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。「絵や会話のない本なんて、なんの役にもたたないじゃないの」とアリスは思いました。そこでアリスは、頭のなかで、ひなぎくのくさりをつくったら楽しいだろうけれど、起きあがってひなぎくをつむのもめんどくさいし、どうしようかと考えていました（といっても、昼間で暑いし、とってもねむくて頭もまわらなかったので、これもたいへんだったのですが）。 筑紫Q明朝 アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈（たいくつ）しはじめ

全てはタイトルが物語っているのですが、デザインが好きな人やデザインに興味のある人が集まって議論したり、物を作ったりするコミュニティを立ち上げました。 https://design-front.connpass.com/ 誤解して欲しくないのは、このコミュニティはデザイナーのためのコミュニティではないということです。 仕事でデザインする人は主にデザイナーという職種ですが、ビジネスや日常の生活においてデザインは切っても切れないものであり、それに対する価値はデザイナーのためだけではなく、すべての人に関わってくる物です。 例えば自分が住んでいる家やデスク周り、キッチン、人が歩く道など人が関わる場所で人が作る物すべてにデザインは存在し、我々はそれらを活用して生きています。 デザイナーはそれらを利用するシーンや初めて触れるシーンなど、様々なシチュエーションを想像しながらより使いやすい、より見やすい物を

幅も高さも可変します。 最後に レスポンシブリサイズを活用することで、マルチデバイスに対する意識をプロジェクトチームやクライアントと早期段階で共有できることと、デザインプロセスのスピードが早くなることが大きなメリットです。 設計の段階で重要なことはグラフィックなどの見た目の部分ではなく、情報の伝達手段や機能がそのサービスにとって有効かどうかの判断を全体で共有して認識をあわせるところにあります。 とくにクライアントからすればWebサイトやアプリに対する知識はさほど高くないことが多く、その場合どしても自分にとって理解できそうな部分から考えるのが一般的です。 そうなると最初に目につく見た目関する議論から入ることも少なくありません。 しかし設計の段階で重要なのは、見た目の部分ではなく、ユーザーの導線であったり、機能などの実際に使うユーザー目線にフォーカスを当てたディスカッションです。 そのためワイ

2018年 11月 30日 たった一つのphpファイルでシンプルにデータベースをマネジメントできるAdminer カテゴリ： Webツール タグ：データベース データベースのマネジメントといえば phpMyAdmin あたりが有名かと思いますが、インストールが手間だったりセキュリティリスクのことを考慮したりと手間があるものが多いかと思います。 今回紹介する Adminer はタイトルの通りたった一つの php ファイルをアップロードするだけでデータベースの管理ができるので非常にシンプルであり、使い終わったらファイルを削除してしまうことでセキュリティリスクも回避できるためかなり便利です。 使い方 サイトから Adminer 本体をダウンロード https://www.adminer.org/ サーバーに ftp 等でダウンロードした php ファイルをアップロード アップロードした Admi

2018年 10月 03日 Google Fontsが正式サポートを開始した日本語ウェブフォント8種類それぞれの特徴と使い方 カテゴリ： Font タグ：ウェブフォント Google Fontsで早期アクセスとして提供されていた日本語ウェブフォントの、正式サポートが始まりました。全部で8種類あるのですが、それぞれのフォントの特徴などを紹介したいと思います。 フォントの紹介 Noto Sans JP GoogleとAdobe が共同開発しているフォントファミリー。コンセプトがフォントセットにない文字を使う時に表示される豆腐文字を撲滅すべく作られたシリーズで、名称のNotoも「no more tofu」からきています。 Noto Sans JP はうろこのないゴシック体で、欧文フォントでいうサンセリフです。（ただしゴシック体のことをサンセリフ体とするのは日本においてであり、本来ゴシック体はブラ

近年スマートフォンでWebサイトを閲覧・利用する人が増え、制作現場ではモバイルのユーザビリティに着目したモバイルファーストが広く認知されました。 Webサイト制作ではレスポンシブウェブデザインが浸透しているため、スマートフォン向けのデザインをベースにタブレットサイズ、PCサイズにそれぞれ調整しながら最適化していくのが基本的なデザインフローです。 現場で困るのは、モバイルファーストを単にスマートフォンのデザインを先に作ることと捉えてしまい、効率化を図った結果スマートフォンのデザインができたらそれを次の工程となるコーダーに渡し、それのコーディングに平行してPCやタブレットのデザインを行うといった無茶が発生することです。 このやり方は一見効率的に見えるのですが、実際にやってみると現場では混乱を招いた結果、結局ムダな工数が発生するということになりかねません。 なぜなら、モバイルファーストであればス

ビジネスやWebサービスなど何かを始める場合にはビジョンがあって、そのビジョンを伝えるには相手とのコミュニケーションが必要になりますよね。 しかしコミュニケーションを図る場合、わりと相手の立場になって考えるというのが中々難しく、つい自分の伝えたいことを主にしてしまうことが結構あるかと思います。 たとえば有名な「顧客が本当に欲しかったのはドリルそのものではなくドリルの穴である」という話がありますが、これはドリルの解説に採用しているモーターやバッテリーなどの機能の素晴らしさを幾つも伝えたところで、顧客が欲しいと考える「穴があくか」についてをしっかり伝えなければ、顧客はそのドリルに価値を見いだせないという話です。 しかし近年ドリルはさまざまなメーカーが販売していることもあり、「穴が簡単にあけられる」と伝えられても、すぐに買うという意思にはならず、他のドリルとの違いは何なのか？ 自分が欲しいと思う

2018年になってから新しい試みとして僕のブログ名義でセミナーやイベントを開催しているのですが、その中のひとつにWebデザインシンキングセミナーというものがあり、こちらはWebクリエイターボックス のManaさんと一緒に色々な場所で主催したり、お話する機会を頂いたりしています。 Webデザインシンキングセミナーとは Webサイトのデザイン、デザイン論、デザインシンキング、情報設計、UI、UX、Webサイトの運用など、デザインを行う前〜デザインを行う時、行った後など、それぞれのフェーズで考えることや身につけておくこと、手法やツールの使い方などをお話したりワークショップを行ったりすることで、僕たちがこれまで培ってきた知見を共有するためのセミナーです。 Webサイトに限らずデザインでは考えることが非常に多く、「デザイン=考えること 」と言っても過言はない程デザイナーは様々なことを考えてデザインし

フリーランスになってお仕事を頂くお客様と直接話す機会が増えてきました。 会社員の頃は受託の仕事ではなかったので、こういった経験がないまま独立したため、最初に聞いておくべきことや確認する事が非常に多く、結構時間がかかります。 僕の場合、Webサイトを作って欲しい、リニューアルをして欲しいという要望からヒアリングをするというのが多いのですが、ちょっとどういった事を話し合っているのかを書き留めようと思います。 最初の打ち合わせ前に行うこと お客様との打ち合わせの前にその業界について色々調べます。というのも、我々サイト制作者はあくまでサイト制作のプロであって、お客様の業界に関してはほぼ素人なので知らないことばかりです。 そうなると、自分がデザインを作るとしても、何故その色なのか。何故その配置なのか。という部分がぼんやりとしてしまうので、最低でも どういう商品が今人気があって注目されているのか どう

ICSの池田さん（ @clockmaker ）がツイッターでアンケートを取っていた「ブログサイトの検索ボックスって使ってますか？」が気になって僕も投票したのですが、そこから導き出された池田さんの発言がさらに興味深かったので少しやり取りをさせていただきました。 ブログサイトのUI設計で「役に立つかわからないけどセオリーだから入れとく」「後で関係者からとやかく言われるのが面倒だから入れとく」的な代表格が「検索ボックス」だと思ってます。 アクセス解析してみると、利用率は雀の涙。少数をサポートしたいか、対価が得られるかの判断が必要。 — 池田 泰延 (@clockmaker) 2018年1月29日 ブログの検索、サイト運営者が自分のために使ってる印象強いです。サイト運営者もユーザーと考えれば入れておくべきかなぁと。 — YAT (@yat8823jp) 2018年1月29日 なるほどです！ サイト

2017年 12月 12日 セミナーで話すことの意味：登壇者 Advent Calendar 2017 12日目 カテゴリ： 交流 タグ：登壇 この記事は この記事は 登壇者 Advent Calendar 2017 12日目の記事です。 セミナーで話すことは自分の中にある知見を自分の中に整理し、それを提供することで様々なものが得られます。 情報の整理は自分にとっての復習になるので自分のための勉強になる 人前で話すことによりアウトプットになる コミュニケーション力が上がる セミナーによっては報酬がある 自分のことを知ってもらえる etc 聴講側であれば自分の知りたいことや知り得なかったことを知れるのがメリットですが、登壇側にもこれだけのメリットがあります。 僕はセミナーで話すことは自分自身の勉強になるのが一番のメリットだと感じています。 例えば、発表の際に資料を作りますが、知らない人の前で

2017年 12月 06日 テーマチェックのススメという内容で WordBench 岐阜 に参加して話してきました カテゴリ： WordPress タグ：WordBench 12/2にWordBench 岐阜に参加してお話してきました。WordBenchで登壇するのは結構久しぶりだったのですが、初めて参加したWordBench岐阜のみなさんが暖かく迎え入れてくださって非常に話しやすかったです。 テーマチェックはテーマを作った後で行うことが多いのですが、テーマを作ったことがない人やそもそもテーマが何か分からないという方もおられるかな？と思ったので、軽くテーマが何かというところから簡単に話しました。 WordPress はテーマを切り替えるだけで見た目を変えられること。また、機能面はプラグインの部分として分離されているので、基本的にテーマを変えても機能は残っているので、テーマを自由に変えられる

2017年 12月 02日 フリーランスになってからのワークスタイルとライフスタイルについて | フリーランス Advent Calendar 2017 2日目 カテゴリ： ライフスタイル タグ：仕事 2014年に Web担としての業務内容取りまとめ ｜会社員 Advent Calendar 2014 10日目 という記事を書いたのですが、現在そこから働き方が変わってフリーランスのWebデザイナーとして働いています。 元々制作会社で働くWebデザイナーというわけでもなく、フリーランスになりたい！といった志でなったわけでもないので、フリーランスになった時の得意先というのは特にないまま独立したという経緯な為、どうやってフリーランスになれば良いのだろう？と考えてる人には参考にならないかもしれません。 僕は会社員の頃からこのブログを運営していて、おかげさまでこのブログを知っている方からお仕事を頂い