HTML

読み: えいちてぃーえむえる [rd_line type="rd_line_dashed" color="#1990aa" margin_top="4" margin_bottom="30"] 「Hyper Text Markup Language」の略称で、Webページを作成するために開発された言語のこと。現在の最新バージョンはHTML5(2018年5月現在)。 Hyper Text(ハイパーテキスト)は、ハイパーリンクを埋め込むことができる高機能な文書(テキスト)で、別のWebページにリンクを張ったり、 Webページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができる。HTMLはこのハイパーリンク機能を利用して、関連する情報同士を結びつけ整理するという特徴を持つ。 HTMLでは、文書内の各要素をMarkupする(=目印をつける)ことができる。例えば「見出し」・「段落」・「リスト」等、文書の中でそれぞれの要素が持つ役割をMarkupすることで、サーチエンジンやWebブラウザがそのページの文書構造を理解し、解析や表示を可能としている。文書構造を適切に定義することはSEOの観点からも非常に重要。 [rd_line type="rd_line_dashed" color="#1990aa" margin_top="4" margin_bottom="30"]関連用語 SEO CSS ツイート!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

レスポンシブ・レイアウト

読み: れすぽんしぶ れいあうと [rd_line type="rd_line_dashed" color="#1990aa" margin_top="4" margin_bottom="30"] 同一のURL・同一のHTMLソースを配信する際、ユーザーが使用する端末の画面サイズに対応して(=レスポンシブに)最適なレイアウトを可変的に表示させるようCSSで制御する手法のこと。「レスポンシブ・デザイン」とも呼ばれる。基本的に表示画面(ブラウザ・ウィンドウ)の幅を判断基準とする。 パソコン画面の大型化やスマートフォン・タブレット端末の普及に伴い、ユーザーがWebページを閲覧する際に使用する画面サイズは多様化の一途を辿っており、この状況に対応するために利用される。 SEOの観点からも、Googleが提唱する「モバイル・ファースト・インデックス(MFI)」への対応として有効な手法。 ひとつのHTMLソースを全ての端末に対して利用できるため、端末間で情報に差分が生まれない、更新・運用の手間を軽減できる等多くのメリットがある一方で、複数の画面サイズに対応した可変レイアウトを設計段階からきちんとコントロールする必要があり、初期開発の工数は上がる傾向にある。 [rd_line type="rd_line_dashed" color="#1990aa" margin_top="4" margin_bottom="30"]関連用語 レスポンシブ・デザイン ツイート!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

TIPS #001

アプリケーションを切り替えるショートカット[rd_line type="rd_line_dashed" color="#1990aa" margin_top="4" margin_bottom="30"] 資料を作成したりスケジュールやメールを確認したり……パソコンを使って仕事をしていると、沢山のアプリケーションを立ち上げて、それらを行ったり来たりしますよね。いちいちマウスを使ってアプリケーション間を移動するのって意外と面倒に感じたりします。 そんな時は「Alt(command)」+「Tab」キーを押してみましょう。立ち上がっているアプリケーションを順番に切り替えることができます。 ……え、そんなコト知ってる? では「Alt(command)」+「Shift」+「Tab」キーのショートカットはご存知でしょうか。 Altキーを押さえながらTabキーをタンタンタン……あ、行き過ぎた! なんて時、そのままもう一周するのは「やれやれ」って感じですよね。そこでShiftキーの出番です。Shiftキーを一緒に押さえると、逆順でアプリケーションを切り替えることができます。 これ、慣れると思いのほか便利だったりしますので、よかったら試してみてください。 [rd_line type="rd_line_dashed" color="#1990aa" margin_top="4" margin_bottom="30"] このシリーズ記事では、皆さんの日々の業務を「チョットだけ効率化させる」TIPSをご紹介しています。要Check!! ツイート!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

有限会社田和楽様(農業・小売業)

今回インタビューにお応えくださったのは、第3期研修を修了された、有限会社田和楽の成澤様。田和楽さんはお米などの農産物の生産と販売のほか、全国でも数少ない「米俵」の製作・販売をしていらっしゃいます。 有限会社田和楽様[rd_line type="rd_line_dashed" color="#1990aa" margin_top="4" margin_bottom="4"] Web担第3期 修了生 Web担(以下、W): 早速ですが、今回Web担を受講された理由やきっかけをお聞かせください。 成澤様(以下、成): 10年近く前に作った自社サイトを今の時代に合わせたサイトにしたい、特にスマホ対応をしっかりしたいという思いが一番にありました。また、WordPressの利便性に魅力を感じていたので、WordPressの基礎を学べるというのもWeb担の受講を決意した理由のひとつです。受講を通して、まずは米俵の部門のWebサイトを制作することを目的としていました。 W: Web担の研修では、情報設計からレイアウトとデザインの基本、写真やコピーなどのコンテンツ作り、そしてWordPressでの制作実習と学んでこられましたよね。苦労した点や新たな気付きはありましたか? 成: 苦労した点は、始めの段階で、私と弊社の社長との間の意思疎通がきちんとできていなかった部分があったことです。研修が進むにつれて既存サイトのペルソナ設定とワイヤーフレーム設計を見直さなければいけないとことが浮彫りになってきたのですが、社内でそれを上手く共有できなかったせいで、結果的に余計な仕事を増やしてしまうことになってしまいました。苦労と言うか、反省すべき点ですね。 また、それまでは書店に並んでいる参考書を手に自分なりにWordPressの勉強をしていたのですが、それだけでは解らないところが多々あったんです。WordPressの扱いについてもWeb担で勉強させて頂いたことが、この先大きな意味がありそうです。こういう風に専門の方に教えて頂かなければ先に進められなかったと思います。 W: 社長との意思疎通ができていなかったとのことですが、具体的にはどのような認識の違いがあったのでしょうか? 成: 目標については同じところを見ていたのですが、手段についての考え方が若干違っていたというところでしょうか。私自身は既存のWebサイトを改善できてこそ、その目的が達せられると思っていたのですが、社長の意見は先に別サイトを制作するというものでした。どうすべきなのか自分だけでは答えが出せない状況になってしまっていたところ、Web担の松口さんからアドバイスを頂き、今後のサイト運営の方向性に納得することができたんです。結果的に今の時代にあったやり方を学び、自分の認識を改めるきっかけとなりましたね。 W: なるほど。Web担が社内での意思疎通を深めるきっかけとなれたのは、事務局としても嬉しい限りです。 ところで、成澤さんは以前からWebサイト制作を業務としてされていたとのことですが、Web担で学んだことを、今後の業務にどのように活かしていきたいと思いますか? 成: 今まで培ってきたことも活かしながら、さらにWeb担で新しく覚えたことを業務で発揮していきたいと思っています。そのためにも、今後も勉強し続けていく姿勢を持ち続けていきたいです。今後、自分のできることが増えると思うと、すごく楽しみです。 W: 私たちも、まだまだ継続的にお手伝いできることがあると思いますので、今後ともよろしくお願い致します! 成: はい。ぜひとも、よろしくお願い致します。 W: 成澤様、本日はありがとうございました。 ツイート!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

No.0026 | 【まだ間に合う!】限定12社様・Web担第5期生、最終募集中

皆さんこんにちは。Web担事務局です。 敬老の日を過ぎ、間もなく秋分の日。皆さん秋の連休シーズンはどのようにお過ごしでしょうか? 地域によっては、連休と台風による降雨が重なるところもあるようで……。お出かけの際はお気をつけくださいね。 それでは、Web担メルマガ第26号をお届けします。 CONTENTS 01. Web担第5期生、募集中! 02. 【VOICE】受講生の声 03. お悩み解決最前線 04. KのWeb担成長期 05. 無料説明会 毎週開催中! 06. 編集後記 Web担第5期生、募集中! 現在、Web担第5期生を最終募集中です。ご相談・お申込はお早めに! Web担オフィシャルサイト https://webtan.jp/ 【VOICE】受講生の声 Web担では受講生の方に、Web担を受講しての感想や今後の展望についてインタビューをさせて頂いています。このシリーズではインタビューの中から、受講生のナマの声をご紹介していきます。 今回インタビューにお応えくださったのは、第3期研修を修了されたS社の北島様と堀田様。創立60年を超える、プラント設備の製作などを手がける企業様です。 続きはこちら: https://www.facebook.com/webtansyouei/posts/1915725528457616 お悩み解決最前線 このコーナーでは、Web担で実施したアンケートに寄せられた声から、多くの方に共感されるのではないかな、というケースをご紹介していきます。今回ご紹介するお悩みは……。 「IllustratorやPhotoshopの使い方はわかるんだけど、そもそものデザイン力が欲しい」 https://www.facebook.com/webtansyouei/posts/1921815374515298 KのWeb担成長期 オフィシャルFacebookページにて連載中の「KのWeb担成長記」。 第9回:K、後輩ができるの巻。 https://www.facebook.com/webtansyouei/posts/1927939233902912 無料説明会 毎週開催中! 「Web担(ウェブタン)」は、多彩な講師による実践的な講義を経て、知識の習得だけではなく、即戦力となるWeb担当者を社内に育てるサービスです。きちんとしたWeb担当者が社内にいることで、コストの削減や情報発信のスピードアップが得られるだけでなく、情報の蓄積による自社サイトのメディア化やSEO効果といった副次的なメリットも期待できます。 助成金の対象ですので、条件をクリアしている企業様であれば社内の経費を使わずに受講して頂くことも可能です。詳しくは無料説明会でその内容をお伝えしています。ぜひ、この機会をお見逃しなく! 無料説明会へのご参加・お問合せ https://webtan.jp/seminar#briefing 編集後記 お彼岸と言えばおはぎ、ぼたもち……と連想するのは食い意地の張りすぎでしょうか。ところで皆さん、「おはぎ」と「ぼたもち」ってどのような違いがあるのかご存知ですか? このふたつ、実は基本的に同じもので、違いは食べる季節なんです。「おはぎ=お萩」は萩の季節=秋、「ぼたもち=牡丹餅」は牡丹の季節=春ということですね。あまり一般的ではないですが、夏は「夜船(よふね)」、冬は「北窓(きたまど)」と呼ばれるそうです。 ということで、今週末のお彼岸は「おはぎ」を楽しみたいと思います。 オフィシャルFacebookページの「いいね!」もぜひお願い致します。 https://www.facebook.com/webtansyouei/ 編集:K

S株式会社様(金属加工業)

今回インタビューにお応えくださったのは、第3期研修を修了されたS社の北島様と堀田様。創立60年を超える、プラント設備の製作などを手がける企業様です。 S株式会社様[rd_line type="rd_line_dashed" color="#1990aa" margin_top="4" margin_bottom="4"] Web担第3期 修了生 Web担(以下、W): 早速ですが、まずはWeb担を受講されたきっかけについてお聞かせ頂けますか? 北島様(以下、北): 実はちょうど自社ホームページを非常に問題視していたんです。B to B企業ということもありあまり力を入れていなかったのですが、採用に関して問題がある、と。今は売り手市場ということもあって思うように新卒を採用できていないことから、やはりホームページをなんとかしようと思っていた矢先に、今回のモニター受講枠のお話がありました。「これは絶対に価値がある」と思い、受講を決めました。 W: Web担の受講に際し、具体的にはどのようなお悩みがありましたか? 北: まず、社内に作れる人間がいないんです。現在は外注しているのですが、社内で更新ができない。ちょっとした変更でも外部にお願いしなければならないためそのスピード感に悩んでいて、今後は(社内で更新できるように)WordPressを導入するべきだと話をしていたところでした。Web担は自分たちで運用できるようになるということはもちろん、1社あたり3名まで受講できるというのも魅力でした。 W: というと? 北: Web運用に関して、社内で共通言語をもって話ができないというのが本当に苦しくて、また問題だとも感じていました。複数の人間が専門家から同時に教わり学ぶことで共通言語を持てるようになったことは、会社にとっても価値あることだと思います。 W: 社内に「Web担当チーム」が誕生したわけですね。 北: そうですね。これまではお金をかけてプロに任せてしまえば、それなりに立派なものができて、問題解決になるだろうと考えていましたが、「それは絶対に違う」と認識を新たにしました。マーケティングなどについてもきちんと理解していなければ、せっかくお金をかけても解決にはつながらないと気づいたんです。 W: それは大きな気づきですね。研修を通して、他にも気づきや発見はありましたか? 堀田様(以下、堀): 実は私は商業高校でマーケティングを少しかじっていたのですが、ペルソナなどは全く知らず、今回の受講を機にイチから勉強し直しています。Webを活用して成果を出すための手法など、とても勉強になっています。新しく覚えることだらけで混乱することもありますが、なんとか食らいついてました。 北: Webサイト構築の流れ、情報をワイヤーフレームに落とし込むための考え方、顧客体験設計などは今回初めて知りました。まだ社内で詰めてはいませんが、色々と自分なりに見えてきたところがあります。 W: 逆に、苦労したところはありましたか? 北: B to B企業ということで、社内にどれだけ資格所有者がいて、これだけの電気事業法の施工法の許可を持っているなど、技術的な部分を示せば興味を持ってもらえると今までは考えていたんです。ところが実際には、それだけでは興味を持ってもらえていないのが現状です。 例えばお客様からお褒めの言葉を頂いた時など、コンテンツとして載せたいなと思っても、まずは営業の確認が必要になりますよね。でもそんなのダメに決まっているだろうという思い込みが先に立ち、諦めてしまっていて。非常にもったいないんです。今後は積極的にコンテンツとして盛り込んでいけたらと思っています。 W: 今後採用Webサイトを作るにあたり、心意気みたいなものはありますか? 北: 採用サイトはいわゆるランディングページの形にしようと考えています。せっかく就職を考えている人が訪れてくれても、現在のホームページは全くと言っていいほど情報が少なくて、会社を知ることすらできない。完全に逃してしまっているんです。目標とするサイトがあるので、それを参考に必要な情報を盛り込んでいけたらいいな、と思っています。 基本的に運用は自分たちで行い、最初の構築や大掛かりな更新が必要な時はプロに任せて、と思っています。やはり自分たち自身で伝えていく方がより説得力のあるものになると思うんです。プロにお願いするとしても、ミスマッチがないように、コミュニケーションをとりながらお互いの役割を明確にした上で作っていけば、いいものに仕上がると思います。 W: 最後に、Web担の講義内容や講師の印象についてご感想をお聞かせください。 堀: 一方通行の説明ではなく、講師からこちらの疑問や問題を引き出してくれて、個々の会社に合わせたアドバイスをしてもらえたのでとてもありがたかったです。 W: 北島様、堀田様、どうもありがとうございました! 北・堀: ありがとうございました。 ツイート!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

株式会社ALLION様(外壁塗装業)

今回インタビューにお応えくださったのは、Web担第3期研修を受講中の株式会社ALLION様です。ビル・マンションの建物の管理や建物診断を含む、住宅のリノベーションなどを手がけていらっしゃいます。早速、お話を伺ってみましょう。 株式会社ALLION様[rd_line type="rd_line_dashed" color="#1990aa" margin_top="4" margin_bottom="4"] Web担第3期 修了生 Web担(以下、W): 早速ですが、Web担を受講されての感想など、率直にお聞かせ頂けますか。 ALLION様(以下、A): まだ受講し始めたばかりですが、早くも「Webサイトってここまで色々なことを考えて作られているんだ」と正直驚きました。失礼ながら、もっと簡単に作られていると思っていました(笑)。 W: なるほど(笑)。思ったより大変そうですか? A: というより、ひとつのWebサイト作りを学ぶにあたりこれだけの講師陣がタイアップして講義をしてくれていることに、Web担の「本気」を感じています。正直に言うとここまでとは思っていなかったです(笑)。単体で考えてもすごい講師の方々が、ひとつのゴールに向かってひとつの研修を提供してくださっていることにすごく感激しています。 また講義前後の時間を使って、各講師から自分のやりたいことに合わせた個別のアドバイスを頂けるのもとてもありがたいですね。 W: 受講される皆さん、それぞれ思い描いていることが違いますもんね。研修はまだ序盤ですが、受講されて何か変わったことはありますか? A: これまで頭の中で漠然と描いていた事業計画のひとつが、Web担の受講を通してより具体的なものになりました。特に顧客の「ペルソナ」については、これまでより鮮明なものになったと感じています。 W: それは素晴らしいですね! A: はい。弊社は設立間もない小さな会社ではありますが、スタッフが同じ方向を向いてプロジェクトを遂行できるという点はメリットだと思っています。Web担の受講を通して明確になった顧客の「ペルソナ」を常に社内で共有し、独自性のあるコンテンツを配信して魅力的なWebサイトを作っていきたいと思います。 W: 今後のコンテンツ制作や運用についても、色々と見えてきたということですか。 A: そうですね。今後はSNSとの連携も含め、環境整備も社内の課題としていきたいと思っているんです。 W: Webサイトは作るまでじゃなく、作ってからが大切だということも学ばれたわけですね。 A: 「作ってから」という意味では、自社のWebサイトについてはもちろんですが、Web担の受講生はそれぞれが自社のWebサイトを制作・運用したいという目的のために集まっているわけですよね。実は、この研修の場は異業種交流の場であるとも感じているんです。縁あってこの場に集ったメンバーですので、最終的にみんなで良いネットワークを作っていけると嬉しいですね。 W: 確かにそうですね。Web担修了後のフォローアップ研修など、継続的なコミュニケーションの場もありますので、ぜひ活用して頂ければと思います。 W: ALLION様、本日はありがとうございました! A: ありがとうございました。 ツイート!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');