効率よくコーディングを進めるためにChatGPTを使ってみよう
この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。 今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコーディングしてみよう グロナビをChatGPTで生成してみよう ボタンをホバーした時のCSSをChatGPTで生成してみよう H
UXとUXデザインの概念｜Toshiya Sasaki
はじめまして。デザイナーのSasaki（@toshiyassk）です。 Fintech企業ではたらきながら、UXデザインやサービスデザインを軸とした研究をしたりしています。 先日会社でUXについての勉強会（初心者向け）をさせていただく機会があったので、UXとUXデザインの概念についての資料の一部を記録しておきます。（参考文献に基づいた内容ですが、表現を変えている部分もあります。） UXとは？UXの定義にはさまざまなものがあるが、決定的な一つの定義はない 2010年に世界のUX研究者30名によってUXの定義について議論され、UXを一つに定義する代わりにUXをとらえる視点が明確にされた。 27件のUXの定義が All About UX に掲載されている。 UXをとらえる3つの視点① 主観的評価 ユーザーが製品やサービスを使った体験を通して、結果としてどのような認識をし、どのような感情や評価を抱
【ギャラ格差】怒りの通天閣!? 「大阪の有名WEB制作会社」が東京にモノ申す！ - イーアイデム「ジモコロ」
こんにちは。ヨッピーです。本日は大阪に来ております。 まあ僕は元々大阪産まれの大阪育ちだったのですが、東京に引っ越して早12年…。完全に故郷を捨て去って、今ではヒルズでギロッポンでチャンネーでシースーな毎日を送っております。 東京最高！ 大阪上陸記念に法善寺の水掛不動にお参りする僕。苔がすごい。 そもそも、大手IT関連企業の本社といえば大半が東京にあるわけで。僕も含めてWEB関係の仕事をしている以上、どうしても東京を中心に働かざるを得ません。正直、打ち合わせや取材も楽なことが多いです。 とはいえ、日本には47の都道府県があり、各土地で独自の仕事が生まれています。WEB制作も然り。本日は、東京中心にWEB関係の仕事がまわっている現状に対して物申したいという怒れる大阪の方々にお集まりいただきました。それではご紹介しましょう！ 大阪の怒れるWEB制作会社の代表四天王登場！ じゃーん！ 大阪の怒れ
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
進行管理が上手なディレクターの特徴 | Web制作に関するブログ | 株式会社シロクロ
職業柄色々な会社のWebディレクターと一緒に仕事をします。画面設計やスケジューリングなど、人によって一つひとつやり方が違うので、仕事をしながらディレクション業務を学べるメリットがあります。その中で、仕事がしやすい、進行がスムーズだなと感じた方の特徴をまとめてみました。 連絡がまめでレスポンスが早い個人的に一番の特徴はこれでしょうか。進行管理が上手な方はとにかく連絡がまめです。いつでも連絡がつくし、必要なことはその都度報告がきます。そして反応が早い。こちらが何か質問すると、すぐにクライアントに確認をとり、即座に返信がきます。場合によっては、質問している間に作業が止まることもあるので、レスポンスが早いというのは、それだけで制作側にとっては心強い存在なのです。 スケジュールにディレクターチェックと、その修正作業の時間をいれている例えばデザインの初稿を提出する時、一般的にはクライアントの前にディレ
正式版がリリースしたAvocodeの便利な使い方をご紹介（コリス限定の優待コードもあるよ） | コリス
制作の効率が劇的にアップする『Avocode』の正式版が、1/29にリリースされました！ Avocodeは簡単に言うと、PSDのプレビューや書き出しをPhotoshop無しで行うもので、書き出しは画像だけでなく、SVGやCSSにも対応しています。画像のスライスやスタイルシートのコーディング作業がググッと楽になるWin/Mac/Linux対応のアプリです。 正式版で、特に大きく変わったのがデザイナー用簡単GitHub。これは無料で単体利用できる機能で、PSDファイルの共有やリビジョン管理が非常に簡単にできます。 ベータ版の時から、そして正式版がリリースされてからみっちりと試したので、Avocodeの使い方や登録方法を紹介します。 Avocode Avocodeには無料と有料のプランがあり、有料プランの優待コードがコリスのビジター限定でもれなく使用できます。無料プランだけを使ってもよし、有料プ
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート - コムテブログ
TL;DR 遠方のお客様からのサイト制作依頼、メール問い合わせがあった時に、どんな内容を返信すればよくて、どんなことを聞いておけば概算見積もり（初期費用・ランニング費用）を作りやすくなるのか。ヒアリング時も、ある程度聞き出したい。 ネットや本でも意外と「具体的な例」がないなぁと思い、今回はコーポレートサイトや EC サイト制作依頼があった時に、メール返信や、最低限クライアントに聞いておきたいことや尋ね方をまとめました。ヒアリングシートにも応用できます。会社によって違うと思いますが、ざっくりとメモしておきますので、後は自分流にアレンジしながらご活用ください。 メール用テンプレート ここからはメール返信用です。 コーポレートサイト コーポレートサイトの制作依頼があった時に、具体的にどんな内容をヒアリング、または聞いておけばよいのか項目をまとめました。聞き出した内容をもとに社内スタッフと共有し概
スマートフォンサイト制作で「なんで拡大縮小できるようにしてるの？」と言われた時の対処法
※ この話はフィクションです。実在の人物や団体などとは関係ありません スマートフォンサイトを制作していて、「サイトを自由に拡大縮小できるようにしてるのは理由あんの？」と言われた時の場合の話です。 Viewportの設定どうしてたか <meta name="viewport" content="width=device-width"> これだけ。こうするとサイトの幅=デバイスの幅になり、拡大縮小は自由にできる。 対処法1：話し合うそもそもブラウザにデフォルトで備わっている拡大縮小機能を無効にするのがおかしいなぜ拡大縮小を無効にするのか ネイティブアプリ感を出したい拡大縮小した時に表示が崩れるのを防ぎたい拡大した時に画像がボヤけるのが嫌例えば構成/デザインの上で小さな文字を使わなくてはならない場合、ユーザーはどうやってその文字を拡大するのかユーザーが拡大したいと思っても拡大が禁止されていたら、
クラウドソーシングで提案し、キャンセルになったデザインが使われている - 沖縄ホームページ制作工房「株式会社wEVA」社長日誌
2014-08-19 ランサーズで提案し、キャンセルになったデザインが使われている Web制作 GW過ぎぐらいに開始になり、いろいろとデザインを提示させていただいたのですが、クライアントさんが気に入らなかったようで「デザイナのセンスが無い」などといろいろ言われたのでお断りさせていただき、ボツデザインとしてポートフォリオに載せていたページデザインが勝手に使われているのを発見。 顔が見えない相手のサイトつくるって怖いなぁと思った今日この頃です。 こちらから「あなたの相手は無理」とお断りさせていただいたデザイン、勝手に使っていいものなんでしょうか？ 会話のメールも残してありますが、「私の思い描いている色を提案しなさい」などのまるで色当てクイズで、外れると怒られるという感じでした。 webcrafts 2014-08-19 22:39 Share on Tumblr インターンシップ/OJTメンバ
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
facebookアプリの作り方(PHP編) | PLUS
コンテンツへスキップ →web コメントコメントを残す コメントをキャンセルメールアドレスが公開されることはありません。 * が付いている欄は必須項目です コメント 名前* メール* サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。 Δ 先頭へスクロール
使いこなせばもしや爆速！？ここ最近助けられたチートシート色々を厳選してご紹介！ | バンクーバーのうぇぶ屋
さて、以前このブログではチートシートに関する記事を書かせて頂きました。もう1年以上前の記事になるんですねー。本当時間が経つのは早い物です…。 無くても良いけど、あったら意外と便利なチートシート。得に初心者の間はチートシートと睨めっこしながら色々な技術なりアプリなりと向かい合う事も僕は少なくありません。 しかし、当然チートシート関連もアップデートし続けた方が良い物。いつまでも古いチートシートばかり見ていたら、折角の新機能や便利ツールの存在に気づかず、ぬあーーーー！って成る事もあるやもしれません。 というわけで、今日はここ最近見たチートシート紹介第二弾！チートシートとして手元に置いておけば、いざというとき便利かもしれない物を、比較的新しそうな物から共有させて頂こうかなと思います！ それで行ってみましょー！ OverAPI.com | Collecting all the cheat sheet
Illustratorでのウェブデザイン、環境設定からスライスまでの流れ
イラレでウェブデザインするぜ！そんな方に向けて制作の流れとちょっとした注意事項を書いてみました。 グラフィックデザインをメインにやっている方や、ホームページを作ったこと無いデザイン学生さん向けかなと思います。 （私も学校ではウェブデザインを学んでいません。） そもそも、イラレでホームページってデザインできるの？ そんな疑問もあるかと思いますが、実際に未経験の私がイラレを使って Web制作の現場で働き始めることができたので、全く問題無いです！ いくつかのポイントさえおさえれば、イラレさえ使うことができればウェブデザインできちゃいます。 1.まずは、イラストレーターを起動する 当たり前の事ですが、起動ですね。今回の環境はWin_CS6です！ CS4～ぐらいはそんなに大きな違いは無いはず！です。 ※現在は、MacでAdobe Creative Cloudを使っていますが、基本的な事は全て同じです
柔軟なワークフロー
少し前からWeb制作のワークフローの変化をあちらこちらで聞くようになりました。今まで調べてきたことと経験から学んだことを交えて今の考えをまとめてみました。 Web制作フローの再考とDesigning in the browserを書いた頃からワークフローの変化を意識しており、いろんな記事を読んだり自分なりに考えたりしてます。現在のところ僕が思うのはワークフローはひとつに定められない、ということです。 関わるチームや環境、制作するサイトによって最適なワークフローは変わってきます。例えばオーソドックスな静的なサイト制作とJS、CSS3など比較的新しい技術を駆使したサイト制作、レスポンシブWebデザインの場合ではワークフローは変わります。今までのサイト制作はワークフローが一様でも問題となることが少なかったですが、そうではなくなってきています。 複雑な設計のサイトではプロトタイプなどを用いて早期に
あなたはいくつ当てはまる？デキるWEBディレクター7つの特徴 | DECONCEPTER
WEBディレクターは平均点の高いゼネラリストである WEBクリエイティブのディレクションという仕事の範囲は多岐に渡る。提案段階では見積もりの依頼対応から、要件にあった技術とデザイン、実現可能なWBSの作成、運用フローの策定などプロデューサーと相談しながらプロジェクトの骨子を決める役割がある。 プロジェクトがスタートすれば常に進捗管理に目を配り、クライアントの追加要望に対する調整業務も発生する。上がってきた制作物にしっかりと目を通してクオリティーをコントロールをして、成果物というゴールに向けて走り続ける仕事である。 こんな広範囲の仕事をこなすには経験と日頃の姿勢が重要になってくる。デキルWEBディレクターはどんな特徴を持っているのか考えてみようと思う。 1. 作ることが好き WEBクリエイティブの現場はものすごい数のタスクにあふれています。一つ一つが深く重く、何かわからないことがある度に人に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新田龍は謝罪しろ | ビジネスジャーナル @nittaryo
【初心者向け】ランディングページ（LP）の“もったいない”をなくす構成要素とは？
各ソーシャルサービスのシェアボタンをJavaScript無しのシンプルなコードで生成するジェネレーター