拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
!important 2019 （2019年4月20日[土]博多開催） まとめ
2019年4月20日（土）に博多で開催されました 「!important 2019 」のツイートをまとめました。 各トラックに分けて時系列にまとめています。 どうぞご覧ください。
![!important 2019 （2019年4月20日[土]博多開催） まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a62997d198883e68dfaa9af95e86df2aaebbe46/height=288;version=1;width=512/https%3A%2F%2Fs.togetter.com%2Fogp2%2Ff59468a7892125133878ffe6c1ba6bee-1200x630.png)
これは期待！Visual Studio Codeでページやアプリなど、フロントエンドの実装が楽になる機能拡張 -Gimli
Visual Studio Codeが、Webページやアプリのフロントエンド開発用ビジュアルツールになる機能拡張「Gimli」がリリース予定なので紹介します。 CSS GridやFlexboxの実装が単純化されるビジュアルツールで、React、VueJS、Angularなど、さまざまなフレームワークやライブラリもサポートされています。 Gimli Gimliはフロントエンド開発者を対象にしたVisual Studio Codeの機能拡張です。多くのビジュアルツールがリリースされており、それらは「コード無し」を売りにしていますが、Gimliは「コード有り」を特徴にしています。 Visual Studioのコード開発環境とビジュアルツールの融合です。 Gimliのデモ Gimliは複雑なレイアウトを作成するプロセスを非常に単純化するビジュアルツールが用意されています。もちろん、CSS Grid
Webデザイナー1年目で指摘された10のこと｜シロマ🏰｜note
Webデザイナーとして就職し、1年が経ちました。 会社の上司や学校繋がりの先輩、たくさんの方にご指導いただき、なんとか今までやってこれています。 なので、少し遅くなりましたが、1年目に指摘された点を10点、書いておこうと思います。 ①これからデザイン業務に携わる新人さんへ以下10点を気にして携わると、たぶんスタートダッシュが切れると思います。 ただ、失敗は悪いことではありません。みんな、通って来た道だよ〜わかるよ〜って言いたいがために書いてるようなもんです。 どうか自信を失わないで。一緒に頑張りましょう〜〜！！ ②新人さんを教育する中堅〜ベテランさんへ1年のうち、50回ぐらい同じ内容を指導するかもしれません。。大変お手数おかけします。 本人としても気をつけているつもりなんですが、所詮つもりで終わっています。が、１年経てばなんとか気づける程度には成長します。 本当に申し訳ありませんが、どうか
The Next Generation WYSIWYG HTML Editor | Rich Text Editor
★★★★★ "Froala is a wonder" I feel it's one of the most powerful and best javascript editors so far in the ...Read more market.inatialization speed is 40se which is pretty amazing and the security is outstanding. What do you dislike about Froala Editor? No downsides as such.I did not face any major issues with using it.Its practically AMAZING. What problems is Froala Editor solving and how is that
安全なWebサイトのつくりかた ざっくりまとめpart1 - Qiita
情報推進機構「安全なWebサイトのつくりかた」を読んだけど 情報量が多すぎて頭がフリーズしたので、現時点で最低限理解できる内容までを記録しておきます。 誰にでもわかるというより、僕にでもわかる文章で書いていますのでご了承ください。 Webアプリケーションのセキュリティ実装 例として、１１種類のセキュリティ脆弱性が挙げられています。 「何がまずいのか？」「どんなアプリで注意が必要なのか？」を 噛み砕いてからまとめていきます。 SQLインジェクション Part1（本記事） https://qiita.com/E-46/items/93199f38bdacd6b6076a OS コマンド・インジェクション Part2 https://qiita.com/E-46/items/aa43b6a01de8ab205591 1. SQLインジェクション どんな脆弱性なのか インジェクションとは「注入、投
新人Webプログラマの学習が捗るリンク集 - Qiita
はじめに この記事は自分のための備忘録も兼ねた、新人による新人のための新人の教材リンク集です。 新年度になりましたので、少し更新をしました。よろしくおねがいします。 ターゲット この記事はこんな人に向けて書いています。 これからWebプログラマを目指す人 Webプログラマになったばかりの人 コーディングだけでなくデザインやマーケティングにも興味がある人 早く一人前のWebプログラマになりたいと思ってる人 つまりわたしのようなへっぽこのこと 1. コーディングを身につける ▼まずはここから 何から始めて良いかわからない！新しい言語を学びたい！という方に。 ドットインストール https://dotinstall.com/ 動画付きで解説してくれる学習サイト。とにかくカバーしている範囲が広いのも特徴。無料プランでも十分勉強になります。早口ながら丁寧でわかりやすく、時々ちょっと間違える田口先生の
制作者のためのHTML
主にユーザー側の視点から語られることが多いアクセシビリティですが、制作という側からはどのように捉えることができるのでしょうか。2つの切り口から考えてみます。 # アクセシビリティという文脈において、何のためにHTMLを書くかという話になると マシンリーダビリティのため スクリーンリーダーのアクセシビリティのため というように、ユーザーが利用するため、というところにフォーカスした語られ方が多いように感じています もちろんユーザーのために作るというのは正しいのですが、今回はあえて視点を変えて、制作者自身の作るというところに視点を合わせて話してみたいと思っています 僕がどういうものなのかというと、 # 参照: 全部入りHTML太郎(@_yuheiy)さん | Twitter ツイッターでは「全部入りHTML太郎」という名前でやっています # 参照: シフトブレイン／スタンダードデザインユニット
スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part1｜Takumi Hasegawa (unshift)
基本的には実装側で見え方に破綻がないようにしますが、実機でみたときにデザイナーさんは自分でデザインしたものとは少なからず違うものがあがってくるはずなので、違和感を感じることはないのかなと、疑問に思いました。 結局はデザイナーさんと実装者との間で、あらゆる画面サイズにどのように対応するかのルールがしっかり共有できればいいですが、口頭や文字だけだったりすると、なかなかわかりにくかったりするものです。 なので、デザインデータに入れてもらったほうが、実機に近い形での見え方がイメージできるのでデザイナーさんもエンジニアも幸せになれるのでは、と思いました。 スマートフォンの画面サイズはさまざまですが、基本的にはiPhoneを基準につくるデザイナーさんが多いかと思うので、少なくとも多くのユーザを占めるiPhoneの見え方は担保できるかな、という感じです。 まぁそんなデザイナーさんの手助けになればと思いま
Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表
Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表：AIで手書きの図形と文字を認識 Microsoftは、手書きでスケッチしたUI画面をHTMLコードに自動変換するWebベースソリューション「Sketch2Code」を発表した。 Microsoftは2018年8月30日（米国時間）、ホワイトボードなどに手書きでスケッチしたユーザーインタフェース（UI）画面を、AI（人工知能）を利用して、HTMLコードに変換するWebベースソリューション「Sketch2Code」を発表した。 Microsoftによれば、UIのデザインプロセスには無駄が多いという。通常は、まずアイデアレベルのスケッチをホワイトボードに描き、数人で検討してから写真に撮影し、HTMLコードを書き下す。これでは手間ばかりかかり、すぐにアイデアを形にできない。 画像認識技術とAIを組み合わせ
アダルトなカード型のWebデザインにカスタマイズした方法 - after work Labo
はじめに なぜブログのデザインを変えるのか？ はてなブログのデザインテーマ テーマの安全な利用 ここまでのまとめ はてなブログテーマのライセンスの種類と内容 はてなブログのデザインテーマのライセンス形態 カスタマイズする前の準備 デザインのコンセプトを決める サイトのレイアウトを決める デザインテーマの選定 デザインテーマのカスタマイズ方法 管理画面での修正 完成までの流れ 無料エディタのライブビューを使う方法 Bracketsの利用 Web Makerの利用 スマホ画面での表示確認 Browsersyncの利用 はてなブログのHTMLのidとclass アイキャッチ画像の活用 アイキャッチを背景画像に使う アイキャッチをタイトルの背景に変える まとめ 申し送り はじめに 皆様お久しぶりです。 時が経つのは早いもので、前回の更新から37日が過ぎてしまいました。 FC2ブログは30日間以上更
文字や背景にピュアブラックを使ってはいけない理由
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を
宣言ブロックのCSS設計 - kojika17
日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用
ラジオボタンをUIに用いる時のポイントを解説！より良いサイト、アプリの利用環境のために
ラジオボタンはフォームにおける必須要素です。互いに相容れない２つ以上のオプションがある時に使用され、ユーザーは正確に１つの選択肢を選ばなければなりません。言い換えれば、選ばれていないラジオボタンをクリックすることによって、選んでいた他のどんなボタンも選ばないということになります。 ラジオボタンは正しく使用されれば素晴らしいものです。ユーザーが間違ったデータを入力するのを防ぎます。キーボード・ナビゲーションやプラットフォームを通じた信頼できるレンダリングなど、多くの選択肢を提示してくれます。 本稿では、ユーザビリティ・テストによって巧みにつくられたラジオボタンに関する実用的なガイドラインをご紹介します。 ラジオボタンの名前の由来 古いカーラジオにおいて放送局を変えるために使われたことにちなんでラジオボタンと呼ばれるようになりましたが、このボタンは１つ押された時、別の１つは飛び出すようになって
無限スクロールの課題とは！スクロールが長いサイトのデザイン手法
無限スクロールの課題とは！スクロールが長いサイトのデザイン手法 スクロールが長いWebサイトのデザイン手法をまとめています。無限スクロールを採用するページは増えていますが、良い点もあれば当然課題もあります。ユーザーにとって使いやすいサイトをデザインするためにぜひ意識しておきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。 本記事
CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
𝙈𝘼𝙍𝙄𝙉𝘼🦋｜maricha.eth on Twitter: "こんな雑なラフ画から自動で検出してHTML組めるんか...😳 GitHubみたら既にv0.6.0までリリースされてるし、LPくらいならすぐ自動コード生成できる時代になりそう。リアルタイムにデモ出来てるのが凄い。 #AI… https://t.co/LgkBt38Tsh"
最近はもうHelveticaだけではない！2018年、実際に使用されている人気が高い英語フォントの組み合わせ
「今後ともIEは使わないようにしてください」IEの使用をやめれば、デザイナーとエンジニアの残業が減るという話
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
