Webサイトの構造を可視化！簡単にビジュアルサイトマップが作れる「Octopus.do」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webサイトの構造を可視化して直感的に理解しやすい「ビジュアルサイトマップ」を作成できるWebサービスをご紹介します。 ブラウザからGUIベースのエディタにアクセスするだけで誰でも利用可能で、すべてマウス操作でできるので初心者でも簡単に使いこなせます。ブロックを追加していくだけでサイトマップに簡易的なワイヤーフレームが挿入できる点がとても便利です。 また、既存のWebサイトから素早くサイトマップに変換する方法も合わせて解説しているので、ご興味のある方はぜひ参考にしてみてください！ 【 Octopus.do 】 ■「Octopus.do」の使い方 それでは、「Octopus.do」をどのように使うのか詳しく見ていきましょう！ トップページにアクセスしたら【Create sitemap】ボタンをクリックします。 すると「サイトマップエディタ
制作者のためのHTML
主にユーザー側の視点から語られることが多いアクセシビリティですが、制作という側からはどのように捉えることができるのでしょうか。2つの切り口から考えてみます。 # アクセシビリティという文脈において、何のためにHTMLを書くかという話になると マシンリーダビリティのため スクリーンリーダーのアクセシビリティのため というように、ユーザーが利用するため、というところにフォーカスした語られ方が多いように感じています もちろんユーザーのために作るというのは正しいのですが、今回はあえて視点を変えて、制作者自身の作るというところに視点を合わせて話してみたいと思っています 僕がどういうものなのかというと、 # 参照: 全部入りHTML太郎(@_yuheiy)さん | Twitter ツイッターでは「全部入りHTML太郎」という名前でやっています # 参照: シフトブレイン／スタンダードデザインユニット
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
Webのアクセシビリティを向上させる、始めに取り組んでおきたいガイドラインの10項目のまとめ
Webの創始者であり、W3Cのディレクターを勤めるTim Berners-Lee氏の言葉に、「Webが持つ力とは、その普遍性にあります」というのがあります。Webサイトに誰もがアクセスできるようにするのは、わたし達の責任です。 Webのアクセシビリティは机上では難しいと思われがちですが、実際に取り組んでみるとそんなに難しいものではありません。障害者、スクリーンリーダのユーザー、低速接続のユーザーのアクセシビリティで、比較的簡単に取り組める項目を紹介します。 10 guidelines to improve your web accessibility 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webアクセシビリティとは何ですか？ 01.カラーに依存しない 02.ズームを無効にしない 03.alt属性のあなたが知らないかもし
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
Web制作者がiPhone Xの発売前に知っておきたい、Webページを表示した際に起きる現象とその解決方法
iOS 11が本日リリースされ、iPhone Xの発売を楽しみにしている人も多いと思います。 しかし、Web制作者やブログのオーナーはiPhone Xに対応しておく作業が増えるかもしれません。 iPhone Xではスクリーンが変更され、それに対応するための解決方法を紹介します。 Removing the White Bars in Safari on iPhone X 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone XでWebサイトを表示した際の問題点 解決方法 その1: background-color 解決方法 その2: viewport-fit 解決方法 その2 補足: safe-area-inset-* iPhone XでWebサイトを表示した際の問題点 新しく発売されるiPhone Xは、美しいディスプレ
ひと昔前といろいろ違う、Webサイトを公開した時に確認しておきたい項目のまとめ -Web Launch Checklist
Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。 イラスト: Girls Design Materials 「Web Launch Checklist」は2017年最近のWeb制作事情をふまえて、サイト公開時の確認事項をまとめたものです。 確認項目は6つにカテゴリ分けされており、それぞれ最新の動向が取り入れられたものとなっています。 Web Launch Checklist Web Launch Checklist -GitHub そのまま利用してもよし、また編集して自分用のリストを作成することもできます。 パフォーマンスで確認したい項目 SEOで
2022年更新 ホームページ制作費用の相場｜目的で変わる料金相場 | 大阪 バリューエージェント
サイトごとにかかれているホームページ制作料金の相場がバラバラで、どれが本当の料金相場なのかがわからない。と感じていませんか？ 実際のところ、Googleで「ホームページ制作 費用 相場」等で検索して表示されているWEBサイトがいう料金相場は、決して間違えているわけではありません。 しかし、ホームページに求める効果・目的次第で、ホームページ制作費用の相場が大きく変わるので、適正な料金相場がわからないことが問題なのです。 こういった背景を踏まえてこの記事では、下記2点のことが分かります。 効果・目的別に必要なホームページの違いアナタの求めるホームページを制作するための適切な費用相場この2点がわかれば、使い物にならないホームページを作る事もなくなり、無駄に費用を掛けなくて済む助けになるかと思います。 ホームページ制作の費用相場（早見表）ホームページとはいってもコーポレートサイトや採用サイト、ポー
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近
行政サイトを作る時に気をつけておいた方がいい事 - Qiita
県や市の公式ホームページ制作の経験から、気をつけておきたい点をメモに残しておきたいと思います。 納品前 納期が３月に集中する 行政サイトの場合、お金は年間予算や国からの特別補助金などから支払われます。つまり基本的に年度を跨ぐことが出来ません。（保守にかかる費用は別です）その為、行政の案件に頼っている制作会社は納期が重なり３月が滅茶苦茶忙しくなります。 年度末は余裕を持ったスケジュールを組んでおきましょう。 見積もりは２割増しで ここで言う見積とは入札時の見積もりではありません。行政の案件をいくつかこなして担当者と仲良くなってくると、コンペの上限金額を決めるために事前に見積を頼まれる事があります。「もし○○みたいな案件だったらいくら位でできそう？期間と見積もり貰えると助かるんだけど。」みたいな感じです。サラリーマン金太郎の東北編で出てきたアレです。大事なのはここで割引など一切考えずに、むしろ
フロントエンド速度改善をしようとして参考にしたもの - $shibayu36->blog;
最近フロントエンドの速度改善をほんの少しだけやって、いろんな資料を参考にしたので、今後また速度改善をする時に備えて、参考になった資料をまとめておく。今回パフォーマンス改善やった項目としてはExpiresヘッダ付ける、gzip圧縮かける、JSをbodyの一番下にとか基本的なことしかやらなかったので、そのあたりはこの記事ではまとめていません。 今回は「測定する」「ブラウザがどう表示しているか知る」「改善を検討する」の流れで調べていったのでその順にまとめる。 測定する 何はともあれ測定しないと何も始まらないので、まずは測定の仕方について調べた。 PageSpeed Insights( https://developers.google.com/speed/pagespeed/insights/ )と、webpagetest( http://www.webpagetest.org/ ) はとりあえ
進行管理が上手なディレクターの特徴 | Web制作に関するブログ | 株式会社シロクロ
職業柄色々な会社のWebディレクターと一緒に仕事をします。画面設計やスケジューリングなど、人によって一つひとつやり方が違うので、仕事をしながらディレクション業務を学べるメリットがあります。その中で、仕事がしやすい、進行がスムーズだなと感じた方の特徴をまとめてみました。 連絡がまめでレスポンスが早い個人的に一番の特徴はこれでしょうか。進行管理が上手な方はとにかく連絡がまめです。いつでも連絡がつくし、必要なことはその都度報告がきます。そして反応が早い。こちらが何か質問すると、すぐにクライアントに確認をとり、即座に返信がきます。場合によっては、質問している間に作業が止まることもあるので、レスポンスが早いというのは、それだけで制作側にとっては心強い存在なのです。 スケジュールにディレクターチェックと、その修正作業の時間をいれている例えばデザインの初稿を提出する時、一般的にはクライアントの前にディレ
弊社の制作ガイドラインをクリエイティブ・コモンズ・ライセンスで公開します
バーンワークス株式会社では、Web サイト制作時における制作物のクオリティを一定に保つため、社内における制作ガイドラインを定めていますが、このガイドラインを公開いたします。 制作ガイドライン - バーンワークス株式会社 burnworks/burnworks-guidelines ： GitHub ガイドラインは 「Creative Commons （クリエイティブ・コモンズ） -- 表示 - 非営利 2.1 日本 -- CC BY-NC 2.1 JP」 ライセンスの下に公開され、ライセンスの範囲内においてどなたでもご利用が可能です。 ガイドラインの各項目、内容に関しては弊社の見解、基準によるものですが、文書としては汎用的な作りとなっておりますので、他の Web サイト制作会社、フリーランスの Web サイト制作者にも、ガイドラインのひな形としてお使い頂きやすいのではないかと考えております
ペライチのWebページをすばやく作り始められるやつ「Rin 3.0」作った - MEMOGRAPHIX
Rin 3.0 というのを作った。 Rin - A lean, gulp-based HTML and SASS boilerplate by sanographix僕はいわゆるペライチのWebサイトを作ることが多いんだけど、そういう制作時に使っているフレームワークというかBoilerplate的なやつです。 フレームワークといっても、BootstrapのようにCSSをモリモリ書いて汎用コンポーネントを用意しまくる、というふうにはしていない。結局各webサイトでデザインの要件が大きく異なる場合が多いので、CSS部分の記述をできるだけ少なくして、各サイト向けに柔軟にスタイルを書けるようにする方針をとっている。一方でビルドツールに求められることは割と毎回一緒なことが多いので、gulpですばやく環境構築して、スタイルは各サイトでよしなに、みたいな雰囲気。 Rinは、だいたい下記のようなことがすば
2015年 Webディレクターに必須な11個のスキルまとめ | Web担当者Forum
はじめまして。katharsisの丸山純一郎と申します。 1998年頃からWeb制作にたずさわっております。 長年、ディレクターをしていますが、ディレクターに求められるスキルというのは年々増えていると感じます。 またWeb制作プロダクション以外の社内でのWeb担当者においてもディレクションスキルが必要な場面も多いかと思います。 ここに書く以外にも求められる能力はありますが、今現在何に手をつけていいかわからないという方は是非参考にしていただければと思います。 また制作を専門に行ってる方はディレクターは普段何をしているのかを知っていただければと思います。 新年年明けということもあり、Webディレクターが身につけておきたいスキルについてまとめてみました。2015にちなんで2015のスキルにしようかとも思いましたが11個にしぼりましたので是非お読みください。健康管理や社会人としてのマナーは含まれて
Private Presentation
Private content!This content has been marked as private by the uploader.
ディレクターがワイヤーを書く直前にやるべき超細かい事あれこれ
ども。ナカムラです。 今回はいつもの「やたら上位に食い込みたがるディレクターズマニュアルの記事」と比べるとかなり粒度細かめ。 実際の現場でディレクターがワイヤーを書くその前に「やらなければいけないこと」とその理由について解説してみたいと思います。 ちなみに、お題は「既存コンテンツありのリニューアル with Word Press 案件」と仮定してみます。 さて、ワイヤー書く前にディレクターって何やればいいんでしょうね？ とりあえずサーバー周りの情報整理 WordPressに限らず、どんな案件でもまぁ必須。なんかしらCMSを乗せる場合であれば間違いなく事前に確認しておかないと大怪我するアレですね。 とりあえずLAMP動くかどうか？とセキュリティ系の情報くらいは整理しときます。 この辺の情報は1枚のドキュメントにまとめといたほうが後で楽かもですね。 既存のページ調査 リニューアルであれば、まず
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
のんびりデザインしているような。
Web制作の参考になる！サイトマップやハイレベルサイトマップ、フローチャートなどのまとめ | コリス
サイトリニューアルのお知らせ - 石橋秀仁
