よく見かけるflashを使用しているホームページに、容量的な重さより
質的な重さのあるページに疑問を持っています。

昨今、ADSLなのどの普及で容量は、ある程度解消されています。
しかし、CPU使用率の高いコンテンツも多く、ユーザーにかなりの
負担を強いるものが目立っているように思います。(ゲーム的なもの以外で)
そのCPU使用率の高いコンテンツは、必ずしも容量的に重いものでは
ありません。

実際に商用で作成している人の意見を聞いてみたいです。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

こんにちは。



そうですね。
商用として作成している場合、質的な重さ(Flashのバージョンや、システムへの負担)が、目的を実現するために必要な場合、例えば、CGIやDBと絡めて動作させなければならない場合などは、「お断り」を入れて、作成しています。
けれど、そうでない場合、単に技術のみを誇示するような場合や、目的の実現に不必要な動作を含むような場合には、はっきり「それは意味ないのでやめましょう」と、私は逆提案して、作らないようにしています。

結局、そういう事をすればするほど、リピータが減っていくだろうと予測されるのと、常にどんどん新しくなる技術の中にあっては、すぐ古くなる印象を与えかねない、と思っているからです。

難しいのは、「イメージ戦略」と、「動作」の兼ね合いですが・・・・。
企業のブランドイメージの一新や、訴求も兼ねてやる場合も、案外あるので。
その場合は、けれど、別ファイルを読み込んで、など色々と工夫を凝らしています。

ご参考になれば。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます!

 質問的に未回答のままも覚悟しましたが...

たしかに、ファイルの読み方は、工夫されていますが、
一時的な重い動作(導入部分のページ)は、仕方ありませんけど、
インパクト重視で常に重くてブラウザーの四隅で勝手にループして
いるフラッシュは、困ったものです。(動画より重いのですから)

ユーザー側もいちいち、このコンテンツは、「不適切」や「不快だ」
なんて投稿しませんけど...

今後、ユーザー環境が改善されれば、問題ないことでしょう
けれど、インターネットとメールしかしないユーザーなどにも
常に高スペックPCでないといけない不安感を感じさせます。

お礼日時:2002/03/13 23:47

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qコンテンツとコンテンツの詰まり

Windows XP あるいは8
HTML 4.01

コピー ~ TOP.html copyTOP.css
あああああ と  いいいいいの間隔はあいているのに
いいいいい と  うううううの間隔はなぜか詰ってしまっています。
間隔を空けるにはどうしたらいいでしょうか?
コードは以下の通りです。

[ HTML 側 ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="~">
<title>aaaaaaaaaa</title>

<link rel="stylesheet" href="copyTOP.css" type="text/css">


</head>


<body>

<div id="zentai">



<div id="part">
<p class="title">あああああ</p>
<div id="partnerwaku">
<div id="partnerimage">
<a href="" alt="のロゴ" class=""></a>
<a href="" alt="のロゴ" class=""></a>
<a href=""><img src=".gif" alt="のロゴ" class=""></a>
<a href=""><img src=".jpg" alt="のロゴ" class="A"></a>
<a href=""><img src=".jpg" alt="のロゴ" class=""></a>
</div>
</div>
</div>

<div id="PR">
&lt;PR&gt;
<br>
<div id="PRsection">
<br>
<a href="">
<img src="" alt="" class="PRimage01"></a>
</div>
</div>


<div id="PR2">
<br>
&lt;PR&gt;
<br>
<div id="PRsection2">
<br>
<a href="">
<img src="" alt="" class="PRimage02"></a>
</div>
</div>


<div id="columnwaku">
<div id="columnbun">
<p class="title">いいいいい</p>
<div id="columncontents">
<p><a href=""><img src =".jpg" class="columnarticle01"></a></p>
</div>
</div>
</div>

<br>
<br>
<br>
<br>


<div id="PR3">
<br>
&lt;PR&gt;
<br>
<div id="PRsection3">
<br>
<a href=""><img src="" alt="" class="PRimage03"></a>
</div>
</div>

<br>
<br>
<br>
<br>
<br>


<div id="questionnairesection">
<div id="questionnaire">
<p class="title">ううううう</p>
<div id="questionnairecontents">えええええ</div>
</div>
</div>

<div id="PR4">
<br>
&lt;ddd&gt;
<br>
<div id="PRsection4">
<br>
<a href="">
<img src="" alt="" class="PRimage04"></a>
</div>
</div>


<div id="pagetop">
<br>
<br>
<a href="#logoimage">ページの先頭へ▲</a>
</div>

<hr class="beforefooter">

<div id="aboutus">
<div id="aboutussection">
<p class="aboutustitle">管理会社</p>
<p><a href="Aboutus.html"><img src ="Aboutus.jpg" class="aboutusimage"></a></p>
</div>
</div>

<br>
<br>

<hr class="beforefooter">


</div> <!--全体のdiv-->

</body>
</html>

[ css側]
@charset "Shift_Jis";

body {
overflow-y:auto
overflow-x:auto
text-align:center;
cursor:url("images/.png");
}

#allitem{
cursor:url("images/.png");
}

#zentai{
width:1000px;
margin-left:auto;
margin-right:auto;
}

.title{
margin-top:0px;
margin-bottom:0px;
font-size : 20px;
border-style:solid;
width:592px;
background-color:#FFFF99;
padding:3px;
}


#part{
clear:left;
float:left;
height:180px;
width:642px;
padding-right:147px;
font-size : 20px;
}

#partnerwaku{
height:140px;
width:600px;
border-style:solid;
border-color: #000099;
}


#PR{
float:left;
width:180px;
height:120px;
}

#PRsection{
border-style:solid;
border-color: #000099;
}

#PR2{
float:left;
width:185px;
height:150px;
}

#PRsection2{
border-style:solid;
border-color: #000099;
}

.PRimage01{
width:170px;
height:80px;
}

.PRimage02{
width:165px;
height:100px;
}

#kuhaku{
clear:left;
height:20px;
}

#columnwaku{
float:left;
clear:left;
height:130px;
width:790px;
}

#columnbun{
height:120px;
width:600px;
}

#columncontents{
height:140px;
width:600px;
border-style:solid;
border-color: #000099;
}

.columnarticle01{
height:70px;
width:400px;
background-color:#CC99CC;
}

#PR3{
float:left;
width:185px;
height:150px;
}

#PRsection3{
border-style:solid;
border-color: #000099;
}

.PRimage03{
width:165px;
height:100px;
}

#questionnairesection{
clear:left;
float:left;
height:130px;
width:1050px;
}

#questionnaire{
width:600px;
border-radius: 20px;
}

#questionnairecontents{
height:140px;
width:600px;
border-style:solid;
border-color: #000099;
}

#PR4{
float:left;
width:185px;
height:150px;
}

#PRsection4{
border-style:solid;
border-color: #000099;
}

.PRimage04{
width:165px;
height:100px;
}

文字制限のため省略

Windows XP あるいは8
HTML 4.01

コピー ~ TOP.html copyTOP.css
あああああ と  いいいいいの間隔はあいているのに
いいいいい と  うううううの間隔はなぜか詰ってしまっています。
間隔を空けるにはどうしたらいいでしょうか?
コードは以下の通りです。

[ HTML 側 ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="CONTE...続きを読む

Aベストアンサー

スタイルシート部分です。
 CSS2の本来の書き方に則しています。
CSS2では、基点となるセレクタに続いて「つなげるセレクタ」でつなげていきます。そのため*(全称セレクタ)が追加されています。
 #PRとは、*#PRと感謝腐れます。idがPRの値のすべての要素と言う意味です。
しかし、基点となるセレクタを書く癖をつけたほうが後々楽です。他のページで別の箇所に同じPRidが使われていても適用されないので混乱しなくてすみます。
★子孫セレクタ、隣接セレクタ、属性セレクタなどを活用して、HTMLの文書構造にしたがってセレクタを書く技術を身につけましょう。ものすごく分かりやすくなります。極端に言うとHTMLを見なくてもデザインできるようになります。
[例]
div.section div.section p.Logo{
 はsection(本文)ブロックの内=子孫(半角スペース)のsectionブロック内のclass属性にLogoを持つp要素と読みます。
div.section div.section+div.section{margin-top:50px;}
 は、そのうちのdiv.sectionと隣接した(+)sectionについてのmargin-topの指定です。
div.section div.section{}で指定したmargin:0を上書きでます。
 詳細度が大きいからです。
  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
div.section div.section+div.section  詳細度 [0 0 3 3] ・・・33
div.section div.section  詳細度[0 0 2 2] ・・・22
div.section  詳細度[0 0 1 1] ・・・11

 ⇒5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
 ⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
 はスタイルシートを理解する時に必須です。これを知っていると知らないとでは、まるで違います。いちいちidやclassを書かなくて良くなるので楽です。メンテナンス性が劇的に改善される。

以下、スタイルシート部分
★タブは_に置換してあるので戻す。

_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
/* ディスプレイ幅に影響されないようリキッドにしておく */
/* スマホでも超幅広ディスプレイでも利用可能 */
div.header,
div.section,
div.footer{
_width:90%;min-width:630px;max-width:890px;
_margin:0 auto;padding:5px;
}
div.header div#contentTable h3,
div.section div.section h3{
_margin:0;line-height:1.8em;
_border-bottom:2px gray solid;
_padding:0 0.5em;
_background-color:rgb(255,255,200);
}
div.header div#contentTable ol,
div.header div#contentTable ol li{
_list-style:none;margin:0;padding:0;
_text-align:ceter;
}
div.header div#contentTable ol li{
_margin:3px;
}
div.header div#contentTable ol li{
_display:inline-block;
_width:22%;
_position:relative;
}
div.header div#contentTable ol li img{
_display:block;/* 画像をblockにしてサイズ変更するように */
_width:90%;height:auto;
}
div.section{position:relative;}
div.header div#contentTable,
div.section div.section{
_min-width:0;width:auto;
_margin-right:170px;
_border:solid 2px gray;
_min-height:160px;/* 挿絵画像のサイズが大きい場合はHTML側で指定 */
_padding:0;
_position:relative;/* 子孫のサイズ基にするためrelative */
}
div.section p{
_margin:0 1em;
_text-indent:1em;
_line-height:1.6em;
}
/* 二つ目以降(隣接セレクタ)のsub sectionの上マージンを指定*/
div.section div.section+div.section{
_margin-top:50px;
}
div.header div#contentTable p.Logo,
div.section div.section p.Logo{
_margin:0;height:100%;/* relativeな親ブロックのサイズを基準 */
_position:absolute;
_top:0;right:-170px;
_width:160px;
_text-align:center;
}
p.Logo img{
_display:block;/* 画像をblockにしてサイズ変更するように */
_width:90%;height:auto;
_margin:5px auto;
}
div.guest h3:before{content:"Gest ";}/* ゲスト記事の目印 */

/* 分かりやすいように色をつけておく */
div.header{background-color:yellow;}
div.section{background-color:silver;}
div.footer{background-color:aqua;}
div.section div.section{background-color:white;}
div.header div#contentTable{background-color:lime;}
div.section div.section p.Logo{background-color:fuchsia;}
div.header div#contentTable p.Logo{background-color:orange;}
div.section div.column h3{background-color:red;}
-->
_</style>

スタイルシート部分です。
 CSS2の本来の書き方に則しています。
CSS2では、基点となるセレクタに続いて「つなげるセレクタ」でつなげていきます。そのため*(全称セレクタ)が追加されています。
 #PRとは、*#PRと感謝腐れます。idがPRの値のすべての要素と言う意味です。
しかし、基点となるセレクタを書く癖をつけたほうが後々楽です。他のページで別の箇所に同じPRidが使われていても適用されないので混乱しなくてすみます。
★子孫セレクタ、隣接セレクタ、属性セレクタなどを活用して、HTMLの文書構造にした...続きを読む

Qフレームを使用しているページで任意のコンテンツにリンクを張るには

フレームを使用して、左側:メニュー、右側:コンテンツという構成をとっているページで、右側のコンテンツに任意のコンテンツを表示させた状態でのリンクを張りたいと思っています。具体的にどのようにすればよいのでしょうか?

Aベストアンサー

通常のHTMLで実現するには無理ですが、CGIやJavaScriptを使えば可能でしょう。
勉強ついでにJavaScriptでのサンプルを作ってみました。

--index.html---
<frameset cols="10%,*">
<frame name="menu" src="menu.html">
<frame name="content" src="top.html">
</frameset>

--top.html-----
<html>
<head>
<script type="text/javascript">
<!--
var selfPath = new Array("top.html", "/test/top.html");

function isSelfPath(path){
for(var i = 0; i < selfPath.length; i++){
if(path == selfPath[i]){
return true;
}
}
return false;
}

function loadContent(){
if(parent == null){
return null;
}

if(parent.location.search == ""){
return;
}

var query = unescape(parent.location.search.substring(1));
var params = query.split("&");
for(var i = 0; i < params.length; i++){
var key = params[i].split("=")[0];
var val = params[i].split("=")[1];
if(key == "page"){
if(!isSelfPath(val)){
window.open(val, "_self");
}
return;
}
}
}
// -->
</script>
</head>

<body onLoad="loadContent();" >
</body>
</html>

こうするとhttp://hogehoge.com/test/?page=xxx.htmlなどのようにアクセスすると右側にxxx.htmlが読み込まれます。

環境に合わせていろいろ変えてください。
selfPathと言うのはtop.html自身を表すURIです(絶対パスと相対パスを指定してください)。これに入れておかないと自分自身を指定したときには何回もリロードされちゃいます(笑
ちなみにIEでの動作しか確認してません。

通常のHTMLで実現するには無理ですが、CGIやJavaScriptを使えば可能でしょう。
勉強ついでにJavaScriptでのサンプルを作ってみました。

--index.html---
<frameset cols="10%,*">
<frame name="menu" src="menu.html">
<frame name="content" src="top.html">
</frameset>

--top.html-----
<html>
<head>
<script type="text/javascript">
<!--
var selfPath = new Array("top.html", "/test/top.html");

function isSelfPath(path){
for(var i = 0; i < selfPath.length; i++){
if(path =...続きを読む

Qi-modeコンテンツで

i-mode用のページを作っているのですが、
FORMでSELECTは最大31個までときいたのですが、
50個入れても大丈夫なのですが。。。
ちなみに動作確認はP209とP502で行いました。
他の機種ではダメなのでしょうか????教えて下さい

Aベストアンサー

こんにちは。itohhといいます。

機種によって制限が異なります。
制限値のあるタグは501系が多いです。
(SELECTタグの制限も501系です)

詳しく知りたい場合は、ドコモのHPで調べてください。

基本的にC-HTMLはHTML4.0のサブセットです、使用できる・できないはをちゃんと把握して作成されたほうが良いですよ。
(502系以上を対象にするとか、カラー機種のみを対象にするとか仕様を把握してから決めると良いと思います。)

余計なことかもしれませんが、あまり選択肢が多いのも実際は使いづらくはありませんか?

参考URL:http://www.nttdocomo.co.jp/i/index.html

Qコンテンツスライダーについて

詳しい方いました教えてください。

以下のページのようなコンテンツスライダー?を導入したいと考えています。が、ワードプレスのプラグインを見ても同じようなものが見つかりません。

このような質問形式で進むスライダーを作りたいのですが、何か参考になるヒントをいただけないでしょうか?また、全く同じでなくて構いません、何か良い代替案があればそちらでもかまいません。よろしくお願いします。

http://lonlab.jp/bunseki/

Aベストアンサー

その部分を右クリックするとflashで作られていることがわかりますね。
スタイルシートで行うなら、木構造を持ったブロック間をリンクで移動するようにして、全体をoveflow:hiddenのブロックで囲むと良いでしょう。

QHTMLでモバイルコンテンツの作成

モバイル用コンテンツを作成しています。
au,vodafone,docomo対応で、お気に入りに追加(ブックマーク)のリンクを貼りたいのですが、タグが分かりません。
PC用ですと、javaを使って
<A Href="javascript:window.external.AddFavorite('http://www.goo.ne.jp/','goo')">お気に入りに追加</A>
となりますが、モバイル用ですと、どういう風に記述すればよいですか?
分かる方おしえてください。宜しくお願いします。

Aベストアンサー

I-modeやJ-Skyでは使えるタグが限られているのでできないのではないでしょうか。
それに勝手にお気に入りに追加されてしまうと、逆にセキュリティ上まずいと思います。
AUはXMLを使いますので、I-modeやJ-Skyとは違った表記になります。


人気Q&Aランキング

おすすめ情報