タグ

YATのBLOGに関するyat8823jpのブックマーク (123)

  • プロの Web デザイナーは3分という制限の中で、どれだけ訴求力の高いバナーをつくれるのか?【Adobe Express編】 |https://wp.yat-net.com/name

    2023年 12月 26日 プロの Web デザイナーは3分という制限の中で、どれだけ訴求力の高いバナーをつくれるのか?【Adobe Express編】 カテゴリ: デザイン タグ:AdobeExpress 今回の記事はアドビ社の PR 企画「みんなのデザインチャレンジ」に参加して書いています。 記事のテーマを考える中で、「色々な制限・制約の中で、プロのデザイナーは一体どれだけのものが作れるのか?」 という話になり、ちょっと面白そうだったのと、自分でも試してみたくなったので、今回のテーマで書いてみることにしました。 実際、デザインの仕事は色々な制限・制約の上でものづくりが求められるので、僕自身難しいなと感じることが多いです。 例えばプロダクトを扱う企業やマーケティング会社のインハウスデザイナーは、限られた時間の中で広告用のバナー・アイキャッチを用途・サイズ別に大量に作らないといけません。そ

    プロの Web デザイナーは3分という制限の中で、どれだけ訴求力の高いバナーをつくれるのか?【Adobe Express編】 |https://wp.yat-net.com/name
  • ハンバーガーボタンのマークアップをどうするか |https://wp.yat-net.com/name

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

    ハンバーガーボタンのマークアップをどうするか |https://wp.yat-net.com/name
  • エディタを VSCode に変えてSASSのコンパイルとライブリロードでサクサク開発 – YATのblog

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

    エディタを VSCode に変えてSASSのコンパイルとライブリロードでサクサク開発 – YATのblog
  • 大容量ファイルを転送・共有できるサービス |https://wp.yat-net.com/name

    宅ふぁいる便がサービス終了したり、ギガファイル便の規約にアップロードされたファイルの取扱が書いていない事が Twitter で話題になったりと、利用者が多いからこそ色々話題になる大容量ファイル共有サービス。 メールでは大容量のファイルが転送できないため、 こういったサービスは非常にありがたくて多くの人が利用しているのですが、実際自分のデータを何らかのサービス経由で相手に送るということは、その経由するサービスにデータを一度送ることになるため、預けたデータがどう管理されているかは気になりますよね。 ギガファイル便というサービス、 ・アップロードしたファイルの取り扱いについて規約がない(もうこの時点でアウトだと思うが) ・運営会社は代表取締役の氏名なし(かなり黒い) ・住所と電話番号の地域が合ってないし電話番号は別名義会社(アウトじゃね?) 使わないほうがいいと思うけど。 pic.twitter

    大容量ファイルを転送・共有できるサービス |https://wp.yat-net.com/name
  • Web デザイナーはコードが書けるべきか論について |https://wp.yat-net.com/name

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

    Web デザイナーはコードが書けるべきか論について |https://wp.yat-net.com/name
  • ふしぎの国のアリスの魅力的な世界観とそれを表現するための配色やフォントなどのまとめ

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

    ふしぎの国のアリスの魅力的な世界観とそれを表現するための配色やフォントなどのまとめ
  • 大正ロマンに関する建築や文化とそれを表現する配色やフォントのまとめ |https://wp.yat-net.com/name

    フォント 大正ロマンを表現するにぴったりなのはレトロ感やモダンを感じさせるフォントが非常に会います。 特にオールド体はマッチするものが多いのでいくつかご紹介します。 明朝体 丸明オールド 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より) 貂明朝 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事が

    大正ロマンに関する建築や文化とそれを表現する配色やフォントのまとめ |https://wp.yat-net.com/name
  • デザインコミュニティ「デザインフロント」を立ち上げました |https://wp.yat-net.com/name

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

    デザインコミュニティ「デザインフロント」を立ち上げました |https://wp.yat-net.com/name
  • あなたの文章を劇的に読みやすく底上げしてくれる執筆サポートツールをご紹介 – YATのblog

    2018年 11月 08日 あなたの文章を劇的に読みやすく底上げしてくれる執筆サポートツールをご紹介 カテゴリ: Tools タグ:ライティング ブログを長く続けていますが、ブログというメディアは自分で書いて自分で確認し、自分で投稿するという具合に一人で完結するもののため、書いた文章がおかしくないかを常々気にしながら運営しています。 そのため何度か読み返しをして公開していますが、それでも誤字脱字があったり、漢字をひらかなかったがために読みづらかったりなどをあとから気づくことが多いです。 それらをどうにか防ぐ方法はないか?と考えていたのですが、最近これはという2つのツールに出会い、それらがかなり軽減できるようになったので、今回はその2つのツールを紹介します。 日本語入力システムATOKの導入 対策として一つ教えてもらったのが、日本語入力システムにATOKを導入することです。 これまでGoog

    あなたの文章を劇的に読みやすく底上げしてくれる執筆サポートツールをご紹介 – YATのblog
  • Google Fontsが正式サポートを開始した日本語ウェブフォント8種類それぞれの特徴と使い方 |https://wp.yat-net.com/name

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

    Google Fontsが正式サポートを開始した日本語ウェブフォント8種類それぞれの特徴と使い方 |https://wp.yat-net.com/name
  • ユーザビリティを考慮するためのタブレットファーストという考え方 – YATのblog

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

    ユーザビリティを考慮するためのタブレットファーストという考え方 – YATのblog
  • Webサイトの速度は本当に早ければ良いのか? |https://wp.yat-net.com/name

    Googleの順位位置づけアルゴリズムにページの読み込み速度を取り入れるアナウンスがあってから、Webサイトの読み込み速度は早いほうがいいという意識がWeb業界全体に流れています。 何故表示速度が遅いと駄目なのか 確かに自分がインターネットで調べ物をしている時、サイトの表示が遅いとストレスを感じますし、遅すぎると表示を待ちきれずにサイトから離脱もします。 調べ物をしている時は早く知りたいという気持ちが大きいので、答えがすぐにでてきそうにないと感じると次のアクションを起こすのが人間で、その判断速度は大体3秒までと言われています。 この心理をもとに離脱する人が増えるということは、そこに例えどんな有益な情報が掲載されていたとしても、読まれなければ意味がないコンテンツとなってしまうので、そうならないために表示速度を早くするというのが業界の流れであり、ただ早ければいいのではなく、有益なコンテンツであ

    Webサイトの速度は本当に早ければ良いのか? |https://wp.yat-net.com/name
  • Webデザインシンキングセミナーで伝えたいこと |https://wp.yat-net.com/name

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

    Webデザインシンキングセミナーで伝えたいこと |https://wp.yat-net.com/name
  • Webサイト制作に入る前の打ち合わせで考えることとお客様と話し合うこと |https://wp.yat-net.com/name

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

    Webサイト制作に入る前の打ち合わせで考えることとお客様と話し合うこと |https://wp.yat-net.com/name
  • CXOという役職とUXデザイナーの仕事とは |https://wp.yat-net.com/name

    ツイッターで CXO Night #2に参加して思い出した「こう思ってWEBデザイナーになったのに」 というのが流れてきて「CXOってなんだろう?」という疑問が湧いたので調べました。 CXO: Wikipedia Chief experience officer の略で、直訳すると最高体験責任者になります。具体的にはこの記事 深津貴之さんが、ピースオブケイクのCXOになりました。: cakes を読むと理解できるのですが、簡単に述べると記事中にある深津さんのコメント ユーザーの体験を設計し、良くしていく責任者ですね。 になります。 近年UXという言葉がWeb業界でも使われるようになり、UXの概念は多くの方が理解できるようになったのではないでしょうか。 その中でもCXOは最高責任者という位置づけであり、この就任が企業にとってUXの必要性に気づいた事を表しているのだと感じます。 とはいえ、一般

    CXOという役職とUXデザイナーの仕事とは |https://wp.yat-net.com/name
  • サイト内検索は誰に使われるのか? |https://wp.yat-net.com/name

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

    サイト内検索は誰に使われるのか? |https://wp.yat-net.com/name
  • 僕が大好きなフォント「丸明オールド」 #LOVEFONT – YATのBLOG

    好きです、丸明オールド! オールドタイプのフォントであるこのフォント、カタカナを見たときに一目惚れしました。特に「ル」なんですが、可愛すぎてずっと見てられますよね! 形が特徴的なフォントで、明朝体であるにもかかわらずエレメントに丸を用いることで柔らかな印象を与えてくれます。丸ゴシックというカテゴリがありますが、これは丸明朝というカテゴリになります。 ひらがなやカタカナが特に印象的で、毛筆の動きが強調された文字は非常に躍動感があります。ここに僕は凄く惹かれました! 書いてても伝わらないですよね!見てください、これが丸明オールドです! 長文だとこんな感じです 縦書き 横書きでも縦書きでも見やすくて読みやすいです。オールドタイプの縦書き文章は、昔の書籍を読んでいるような感覚になるので、個人的に懐かしさがあって好きです。 文字が人に与える印象はすごく大事で、読みやすさや見やすさもありますが、そこに

    僕が大好きなフォント「丸明オールド」 #LOVEFONT – YATのBLOG
  • セミナーで話すことの意味:登壇者 Advent Calendar 2017 12日目 |https://wp.yat-net.com/name

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

    セミナーで話すことの意味:登壇者 Advent Calendar 2017 12日目 |https://wp.yat-net.com/name
  • 勉強法に関するアンケートに関して – YATのBLOG

    ツイッターで勉強方法に関するアンケートを取っています。 あなたの勉強はどういうやり方ですか?人によってやり方は様々ですがどういうスタイルでやってる人が多いのかちょっと気になります。どれが正解とかは無いのでお気軽にどうぞ — YAT (@yat8823jp) 2017年12月6日 僕はWeb業界で働いていて、僕をフォローしてくださっている方も同業の方が多いです。そのためWeb業界の勉強方法としての投票が多くなりますが、数学の勉強や英語の勉強にしてもインターネット(インターネット動画による講座閲覧などがありますね)を主体にする人もいれば、書籍を購入してそれを中心に勉強する人もいますし、スクールに通う方もいれば、それ以外の手段を使う方も当然いますので、Web業界の事?という疑問は特に持たなくても大丈夫です。 一番多いインターネットを利用した勉強法に関して まだまだ募集していますが、今のところイン

    勉強法に関するアンケートに関して – YATのBLOG
  • テーマチェックのススメという内容で WordBench 岐阜 に参加して話してきました |https://wp.yat-net.com/name

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

    テーマチェックのススメという内容で WordBench 岐阜 に参加して話してきました |https://wp.yat-net.com/name