非デザイナーの僕が「デザインぽい」ことをする時に使う便利ツール17個｜苦しんでプログラミングを学んだ柴犬（くるしば）
※こちらの記事がはてブの総合人気エントリに入りました！ こんにちは。くるしばです。 元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。 その後個人で開発したサービスを売却したり、また別のIT系の会社を創業したりしています。 去年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに8000人の方々にフォローして頂きました。 プログラミング初心者に絶対覚えてほしい、ググる時の効率が10倍上がるコツ pic.twitter.com/hK1ZhNavwh — 苦しんでプログラミングを学んだ柴犬（くるしば） (@shiba_program) September 13, 2022 僕は普段はいわゆるPMやエンジニアとして仕事をすることが多いのですが、業務でも個人プロジェクトを作っている時でも 「最低限の見栄え
【2022年3月版】文章・画像を引用する時のHTMLの書き方｜SEO基礎 ｜ TK-CREATE
自分のウェブサイトに外部サイトの情報を記載するときには、引用タグを使う必要があります。当記事は、その記述方法を解説したものです。 対象読者は、テキストエディタを使ってHTMLをコーディングする方です。 筆者：タケヨシ ホームページに関する仕事をしています。今年で10年目。現在はフリーランスで働いています。 ホームページに関する困りごとがあればご相談ください。 »»» 相談する 当記事で紹介するHTMLについて 情報源：WHATWG 当記事は『WHATWG』の情報をもとに作成したものです。 ↓ WHATWG の説明 WHATWG (Web Hypertext Application Technology Working Group) はウェブ標準の保守や開発を行うためのコミュニティで、 DOM, Fetch, HTML などを扱っています。 Apple、Mozilla、Opera の従業員た
引用元を表すタグ <cite>要素とcite=”URL”属性の違いと使い分け方 – Jill Tone Blog
blockquote や q など、HTMLにおける引用タグ。 サイト訪問者だけでなくGoogleなど検索エンジンに引用であることを示し、ペナルティを回避するためのSEO対策的な一面も持つHTMLタグでもあります。 ややこしいことに、引用タグと対となり引用元を示す cite タグには要素形式のlt;cite>と属性形式のcite="URL"の2種類が存在しています。 引用タグの解説をしているサイトでもciteの使い方はどちらか一方しか解説していないことも多く、初心者にはよくわからないタグのひとつとなっています。 2種類あるcite、どちらが正しい？引用タグの使い方を調べていると、引用元を表す cite の使い方でどちらか一方しか解説されていないことが多々あります。その両方をまとめるとこんな感じ。 <!-- 属性としてのciteタグ --> <blockquote cite="https:/
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
ビジネス向けウェブサイトを簡単に設計・構築・公開できる「Microsoft Power Pages」発表
Microsoftが、ローコード開発プラットフォームである「Microsoft Power Platform」ファミリーの5番目の製品として、ビジネス中心のウェブサイトを誰でもすばやく簡単に構築できる「Microsoft Power Pages」を発表しました。 Announcing Microsoft Power Pages: Build secure, low-code websites | Microsoft Power Pages https://powerpages.microsoft.com/ja-jp/blog/announcing-microsoft-power-pages-build-secure-low-code-websites/ Microsoft's Power Platform can now build websites and turn images int
SEOに強くなる！記事構成の作り方を解説【オウンドメディア編集者に必要なスキル 第1回】 | ナイルのマーケティング相談室
ウェブマーケティングの一環として、「オウンドメディア」による集客活動が広く認知されました。今や多数の企業が、自社ウェブサイトでのブログなどを実践しているのではないでしょうか。企業規模などによってはマーケティングに割ける予算も限られているため、社内でオウンドメディアのコンテンツを内製する場合もあるでしょう。 しかし、社内コンテンツを内製化するにあたってコンテンツ制作の経験者がいるとは限りません。コンテンツ制作は意外と奥が深く、最近ではアフィリエイト目的のブログでさえハイレベルなコンテンツを公開している状況です。そのため、中途半端な記事では読まれないおそれがあります。 では、どのようにすれば解決できるのでしょうか。私は解決のキーになるのは、編集者の存在と編集者が持つテクニックだと思います。 そこで、本記事より数回にわたり、オウンドメディア編集者に必要なスキルを紹介します。社内でオウンドメディア
ウェブサイト訪問者を増やす77の効果の実証された方法
サイトは構築できた。でも、どうやって皆に見てもらえるのか…訪問者は一体どこから…そんな不安を抱えていませんか？ ご心配なく、そんな気持ちになるのは、ごく自然なことです。ネットには訪問者を増やすための情報が溢れかえっていますが、その中から本当に効果のあるものを判断するのは、簡単ではありません。 今回の記事では、むやみに全てを掲載しません。代わりに、本当に効果があるものだけに焦点を当てます。 それでは、ご用意はいいですか？ サイトの訪問者を増やす方法 理解を進めるために、方法を以下のカテゴリに分けました。 それでは、本題へと移りましょう。 コンテンツマーケティング サイトで、優れた、関連性のあるコンテンツを作成する限り、Googleからサイトにアクセスする訪問者が安定して増加するものです（もちろんこれが理想）。 でも「素晴らしいコンテンツ」がどんなものなのか、想像もつきませんか？それなら、私た
エンジニアのための、いますぐ使える文章校正テクニック - ICS MEDIA
ウェブ制作や開発の仕事で文章を扱う機会は多いはず。書き手は不自然に思っていない文章でも、読み手は違和感をもっていることがあります。文章校正テクニックを覚えるだけでおかしな表現は少なくなり、読みやすい文章を書けるようになります。 本記事では、ICS MEDIAで実践している文章校正の一例を紹介します。 レベル1、基本的な校正ルールを使う いろんな場面で使える基本的な文章校正テクニックから紹介します。 テクノロジー系の名詞は正しく記載しているか テクノロジー系の名詞を間違って使うと、「本当に技術に詳しいの？」と読者からの信頼度が下がります。名詞は大文字小文字、スペース有無含めて正確に記述しましょう。 Github → GitHub（Hは大文字） Javascript → JavaScript（Sは大文字） After Effect → After Effects（複数形の「s」を忘れてはいけな
サイトマップとは？SEOへの効果や具体的な作り方を詳しく解説！おすすめツールも紹介 | 株式会社ニジボックス
Webサイト制作の中で、サイト全体を把握するために欠かせないサイトマップ。 この記事では、そもそもサイトマップとは何か、なぜ重要なのか、そして作り方まで詳しく解説します。 HTMLサイトマップ、XMLサイトマップと種類ごとの違いも理解できる内容になっているので、ぜひ参考にしてみてください。 まずは、そもそもサイトマップとはどういうものかを理解するところから始めましょう。 サイトマップを作る理由や作るタイミング、誰が作るかについても解説します。 Webサイトの「目次」としてのサイトマップ サイトマップとは、Webサイト全体のページ構造を一覧化したものです。 例えば企業のホームページであれば、まずトップページがあって、一つ下の階層には商品一覧や社員紹介、会社概要のページがあって、さらにその下に各商品や各社員のページがひもづいている…のように、どの階層にどのページがあるかが一目で分かる「目次」の
【初心者向け】ワイヤーフレームの作り方を丁寧にガイド！おすすめツールもご紹介 | 株式会社ニジボックス
本記事では、Web制作では欠かせないワイヤーフレームの作り方を解説します。 初心者の方でも分かりやすいように具体例を交えながら、またこの記事を見ながらすぐに作れるようにガイドしていくので、「ワイヤーフレームの作り方を勉強したい」「ワイヤーフレームを初めて作る」そんな方はぜひ参考にしてみてください！ ワイヤーフレームとは？ ワイヤーフレームとは、一言で説明するとWebページ制作をする上での設計図です。 雑誌のページを作るとき、まずは写真やコラム、テキストの配置を考えてラフを作成します。 みなさんが今読んでいるこの記事も、いきなり書き始めるのではなく、どんな情報をどの順番で書くかをまとめた構成案を元に書いています。 Webページでも同じように、どの情報を/ページ内のどこに/どのように配置するといった情報設計が必要です。 ■参考記事：ワイヤーフレームについて基本をさらに詳しく知りたい方は以下の記
2021年、最も注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行
NewsPicks UIデザイナーのFigma利用フロー大公開！｜つづく（ひらい）ともこ | mokataaan
自己紹介NewsPicksでUIデザイナーをしております。つづく（ひらい） ともこと申します！ 初note投稿なので、本題に入る前に軽く自己紹介をさせていただきますm 2016年に武蔵野美術大学デザイン情報学科卒業後、ヤフー株式会社に新卒デザイナーとして入社しました。 ヤフーでは広告管理ツールのUIデザインやCtoCサービスアプリのデザインなどに携わりました。 そして今年の6月末でヤフーを退職し、株式会社ニューズピックスにUIデザイナーとして転職しました。 現職ではNewsPicksアプリやWeb、その他関連サービスのUIデザイナーとして関わっております。 仕事の話はそこそこに…。なにより一番に覚えて帰っていただきたいのは、「女性アイドルが好きです！」ということです！！ ハロプロ、日向坂46などの日本の女性アイドルグループが物心ついたときから今までずっと好きでして、最近だと「Girls P
4つのサイトを作りながらGatsby.jsを学べるおすすめUdemyコースを紹介！ | WebDev Tech
4つのサイトを作りながらGatsby.jsを学べるおすすめUdemyコースを紹介！ 2022 12/11 Web制作をしている人なら、JAMstackという言葉を聞いたことがあるのではないでしょうか。 それぞれの頭文字はJavaScript・API・Markupを意味し、高速でセキュリティ性の高いサイトを作れることが特徴ですね。 JAMstackで開発する際の主な構成は、「静的サイトジェネレーター」「ヘッドレスCMS」「ホスティングサービス」の3つなのですが、この静的サイトジェネレーターにあたるのがGatsby.jsです。 今回の記事では、Gatsby.jsで4つのサイトを作りながらJAMstackでの開発を学べるUdemyコースを紹介します！
Release v5.2.1 · IBM/plex
👍 76 syncra, tani1987, phut-tran, kgxxx, masterTwig-0902, Aki-Toyo, naokiy, pekeq, zonuexe, yakumo-saki, and 66 more reacted with thumbs up emoji 😄 5 mjabbink, chuck0523, moesuke, Ren33000, and alisonjoseph reacted with laugh emoji 🎉 55 jamesrwaugh, acid-chicken, tsukumijima, azu, sheepla, msksk, AndroPlus-org, amplextro, omega-takai, syncra, and 45 more reacted with hooray emoji ❤️ 36 yabuki,
Webサイト制作をどれくらいの粒度で分解してタスク化するか｜重松佑 / Shhh inc.
プロジェクトが始まるときにかなり初期の段階でWBSを作ることは多いとおもいます。そのWBSの作成、プロマネやディレクターに任せっぱなしになっていないでしょうか。WBSはスケジュールをガントチャートで表したものを指していると思われがちですが、実はスケジュールだけでなく見積もりやアサインを精度高く行うためにも重要なものです。 たとえば「Webデザイン作成」というスコープにどのような実作業が含まれているかはWBSを作ることによって見える化しプロジェクトメンバーやクライアントと共有できるようになります。ときどき下記のように書かれたWBSを見ることがあります。 Webデザイン作成 ・作成 ・確認 ・修正 ・確認2 ・修正2 ・確定 しかし、これでは「Webデザイン作成」に必要な知識、さらには作業量・スケジュール・予算も分かりません。Webデザイン作成の例を続けると、下記のように「作成」のスコープを分
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SWELLでコーポレートサイトを作ってみた！【デザインカンプあり】
https://twitter.com/shodaiiiiii/status/1597712026049990656
「コンテンツSEO」は自社の棚卸しが第一歩。「5W1H」をユーザーに丁寧に伝えることが重要 | 酒匂氏が語る「コンテンツSEO」の極意
Online Courses - Learn Anything, On Your Schedule | Udemy
Health icons
